docs: update variable design (#2032)

relates to #736 

- Update variable design for docs
- fix monospace font not displayed on Typography page
- fix docs Storybook not working correctly because of invalid tsconfig
setting

---------

Co-authored-by: ChristianBusshoff <[email protected]>
Co-authored-by: Lars Rickert <[email protected]>

apps/docs/.storybook/main.ts

@@ -6,10 +6,7 @@ const config: StorybookConfig = {
   framework: {
     name: "@storybook/vue3-vite",
     options: {
-      docgen: {
-        plugin: "vue-component-meta",
-        tsconfig: "tsconfig.app.json",
-      },
+      docgen: "vue-component-meta",
     },
   },
   core: {

apps/docs/src/.vitepress/components/ColorPalette.vue

@@ -112,8 +112,7 @@ const handleCopy = async (color: string) => {
         v-if="copiedColor"
         class="palette__copied"
         :name="copiedColor"
-        :value="`var(--${copiedColor})`"
-        type="color"
+        :color="`var(--${copiedColor})`"
         is-copied
       />
     </div>

apps/docs/src/.vitepress/components/DesignVariable.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/vue3";
 import DesignVariable from "./DesignVariable.vue";
 
 const meta: Meta<typeof DesignVariable> = {
-  title: "variables/DesignVariables",
+  title: "variables/DesignVariable",
   component: DesignVariable,
 };
 
@@ -12,15 +12,13 @@ type Story = StoryObj<typeof DesignVariable>;
 export const Default = {
   args: {
     name: "test-variable",
-    value: "42rem",
   },
 } satisfies Story;
 
 export const Color = {
   args: {
     name: "test-variable",
-    value: "var(--onyx-color-base-primary-500)",
-    type: "color",
+    color: "var(--onyx-color-base-primary-500)",
   },
 } satisfies Story;
 

apps/docs/src/.vitepress/components/DesignVariable.vue

@@ -3,29 +3,16 @@ import checkIcon from "@sit-onyx/icons/check-small.svg?raw";
 import copyIcon from "@sit-onyx/icons/copy.svg?raw";
 import OnyxIcon from "~components/OnyxIcon/OnyxIcon.vue";
 
-const props = withDefaults(
-  defineProps<{
-    /** Variable name. */
-    name: string;
-    /** Value to display */
-    value?: string;
-    /**
-     * Value type.
-     * - color: shows a color preview
-     * - value: shows the plain value
-     *
-     * @default "value"
-     */
-    type?: "color" | "value";
-    /** If true, the user will be able to click the variable to copy its value. */
-    allowCopy?: boolean;
-    /** If true, a "copied" text will be displayed to indicate that the value has been copied. */
-    isCopied?: boolean;
-  }>(),
-  {
-    type: "value",
-  },
-);
+const props = defineProps<{
+  /** Variable name. */
+  name: string;
+  /** Color value to display as preview */
+  color?: string;
+  /** If true, the user will be able to click the variable to copy its value. */
+  allowCopy?: boolean;
+  /** If true, a "copied" text will be displayed to indicate that the value has been copied. */
+  isCopied?: boolean;
+}>();
 
 const emit = defineEmits<{
   copy: [];
@@ -34,17 +21,17 @@ const emit = defineEmits<{
 
 <template>
   <button
-    class="variable"
-    :class="{ 'variable--color': props.type === 'color', 'variable--copyable': props.allowCopy }"
+    :class="{
+      variable: true,
+      'variable--color': props.color,
+      'variable--copyable': props.allowCopy,
+    }"
     :disabled="!props.allowCopy"
     @click="emit('copy')"
     @keyup.enter="emit('copy')"
   >
-    <div class="variable__name" :class="{ 'variable__name--no-value': !props.value }">
+    <div class="variable__name">
       <span>{{ props.name }}</span>
-      <span v-if="props.value && props.type === 'value'" class="variable__value">
-        {{ props.value }}
-      </span>
     </div>
 
     <span v-if="props.isCopied" class="variable__copied">
@@ -93,14 +80,6 @@ const emit = defineEmits<{
     @include mixins.breakpoint(max, xs) {
       min-width: unset;
     }
-
-    &--no-value {
-      padding: var(--onyx-spacing-3xs) var(--onyx-spacing-2xs);
-    }
-  }
-
-  &__value {
-    font-weight: 600;
   }
 
   &__copy {
@@ -133,7 +112,7 @@ const emit = defineEmits<{
           width: 1.25rem;
           min-width: 1.25rem;
           height: 1.25rem;
-          background-color: v-bind("props.value");
+          background-color: v-bind("props.color");
           border-radius: var(--onyx-radius-sm);
           border: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
         }

apps/docs/src/.vitepress/components/DesignVariableCard.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { computed, ref } from "vue";
-import { getCssVariableValue } from "../utils-browser";
+import { ref, toRef } from "vue";
+import { useCssVariableValue } from "../utils-browser";
 import DesignVariable from "./DesignVariable.vue";
 
 const props = defineProps<{
@@ -13,12 +13,14 @@ const props = defineProps<{
 }>();
 
 const wrapperRef = ref<HTMLElement>();
-
-const value = computed(() =>
-  props.hideValue ? undefined : getCssVariableValue(props.name, wrapperRef.value),
-);
 const isCopied = ref(false);
 
+const { value } = useCssVariableValue({
+  name: toRef(props, "name"),
+  element: wrapperRef,
+  disabled: toRef(props, "hideValue"),
+});
+
 const handleCopy = async () => {
   await navigator.clipboard.writeText(`var(--${props.name})`);
   isCopied.value = true;
@@ -28,26 +30,19 @@ const handleCopy = async () => {
 
 <template>
   <div ref="wrapperRef" class="card vp-raw" :class="{ 'card--wide': props.wideName }">
-    <div class="card__container">
-      <slot name="name">
-        <!--
-          client only is needed because we are using "value" here which is
-          using the "getCssVariableValue" function but this is only available
-          inside the browser/client
-         -->
-        <ClientOnly>
-          <DesignVariable
-            :name="props.name"
-            :value="value"
-            :is-copied="isCopied"
-            allow-copy
-            @copy="handleCopy"
-          />
-        </ClientOnly>
-      </slot>
+    <div>
+      <div class="card__name">
+        <slot name="name">
+          <DesignVariable :name="props.name" :is-copied="isCopied" allow-copy @copy="handleCopy" />
+        </slot>
+      </div>
+
+      <div v-if="!props.hideValue" class="card__value onyx-text--small">
+        {{ value }}
+      </div>
     </div>
 
-    <div class="card__container">
+    <div class="card__preview">
       <slot v-bind="{ name }"></slot>
     </div>
   </div>
@@ -57,8 +52,11 @@ const handleCopy = async () => {
 @use "@sit-onyx/vitepress-theme/mixins.scss";
 
 .card {
+  --padding-inline: var(--onyx-spacing-2xl);
+  --border: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
+
   border-radius: var(--onyx-radius-md);
-  border: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
+  border: var(--border);
   background: var(--onyx-color-base-background-blank);
   display: grid;
   grid-template-columns: 1fr 25%;
@@ -67,22 +65,41 @@ const handleCopy = async () => {
     grid-template-columns: 1fr 1fr;
   }
 
-  @include mixins.breakpoint(max, s, -1) {
-    padding: var(--onyx-spacing-md);
-    grid-template-columns: 1fr;
-    gap: var(--onyx-spacing-md);
+  &__name {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-grow: 1;
+    padding: var(--onyx-spacing-md) var(--padding-inline);
+  }
+
+  &__value {
+    font-weight: 600;
+    color: var(--onyx-color-text-icons-neutral-soft);
+    border-top: var(--border);
+    padding: var(--onyx-spacing-2xs) var(--padding-inline);
+  }
+
+  &__preview {
+    padding: var(--onyx-spacing-md) var(--padding-inline);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-left: var(--border);
   }
 
-  @include mixins.breakpoint(min, s) {
-    &__container {
-      padding: var(--onyx-spacing-md) var(--onyx-spacing-2xl);
-      display: flex;
-      align-items: center;
+  // small breakpoints
+  @include mixins.breakpoint(max, s) {
+    --padding-inline: var(--onyx-spacing-md);
+    grid-template-columns: 1fr;
+
+    &__value {
+      border-bottom: var(--border);
+    }
 
-      &:last-child {
-        border-left: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
-        justify-content: center;
-      }
+    &__preview {
+      border-left: none;
+      justify-content: flex-end;
     }
   }
 }

apps/docs/src/.vitepress/components/OnyxBorderRadiusVariables.vue

@@ -49,10 +49,5 @@ const variables = [
       height: 5rem;
     }
   }
-
-  // override variable width so all border radius variable names have the same width
-  :deep(.variable__name) {
-    min-width: 16rem;
-  }
 }
 </style>

apps/docs/src/.vitepress/components/OnyxShadowVariables.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
+import { useData } from "vitepress";
 import DesignVariableCard from "./DesignVariableCard.vue";
 
+const { isDark } = useData();
+
 const shadows = [
   "onyx-shadow-medium-bottom",
   "onyx-shadow-medium-left",
@@ -12,12 +15,13 @@ const shadows = [
 </script>
 
 <template>
+  <!-- We need to include isDark in the key because the variable value depends on the light/dark theme.
+       The key ensures that the component is re-rendered whenever the theme is switched.  -->
   <DesignVariableCard
     v-for="shadow in shadows"
-    :key="shadow"
+    :key="`${shadow}-${isDark}`"
     :name="shadow"
     class="variable"
-    hide-value
   >
     <figure class="preview" :style="{ boxShadow: `var(--${shadow})` }"></figure>
   </DesignVariableCard>

apps/docs/src/.vitepress/components/OnyxSpacingVariables.vue

@@ -22,11 +22,6 @@ const props = defineProps<{
 <style lang="scss" scoped>
 .variable {
   margin-bottom: var(--onyx-spacing-lg);
-
-  // override variable width so all spacings variable names have the same width
-  :deep(.variable__name) {
-    min-width: 16rem;
-  }
 }
 
 .preview {
@@ -38,6 +33,7 @@ const props = defineProps<{
   display: flex;
   flex-direction: column;
   justify-content: center;
+  box-sizing: border-box;
   margin: 0;
 
   &__area {

apps/docs/src/.vitepress/components/OnyxTypography.vue

@@ -50,6 +50,7 @@ const getTextSizeClass = (fontSize?: TextSize) => {
         :key="variable.name"
         :name="variable.name"
         :wide-name="props.wideName"
+        hide-value
       >
         <template #name>
           <p
@@ -94,8 +95,8 @@ const getTextSizeClass = (fontSize?: TextSize) => {
   p,
   a {
     margin: 0;
-    border: none;
     padding: 0;
+    border: none;
     letter-spacing: normal;
   }
 }
@@ -105,6 +106,10 @@ const getTextSizeClass = (fontSize?: TextSize) => {
     display: flex;
     flex-direction: column;
     gap: var(--onyx-spacing-lg);
+
+    .onyx-headline {
+      font-family: inherit;
+    }
   }
 }
 </style>