Merge branch 'main' of https://github.com/SchwarzIT/onyx into feat/18…

…51-data-grid-renderer

.changeset/pre.json

@@ -209,6 +209,7 @@
     "real-mails-sneeze",
     "real-pumas-matter",
     "real-shirts-collect",
+    "red-tables-train",
     "rich-books-move",
     "rotten-apricots-battle",
     "rotten-carpets-sing",

.changeset/red-tables-train.md

@@ -0,0 +1,9 @@
+---
+"@sit-onyx/icons": minor
+---
+
+feat: update icons
+
+#### New icons
+
+- key-settings

apps/demo-app/CHANGELOG.md

@@ -1,5 +1,13 @@
 # demo-app
 
+## 1.0.0-beta.46
+
+### Patch Changes
+
+- Updated dependencies [3e49c73]
+  - @sit-onyx/icons@1.0.0-beta.5
+  - sit-onyx@1.0.0-beta.46
+
 ## 1.0.0-beta.45
 
 ### Patch Changes

apps/demo-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "demo-app",
   "private": true,
-  "version": "1.0.0-beta.45",
+  "version": "1.0.0-beta.46",
   "type": "module",
   "scripts": {
     "dev": "turbo run vite --filter demo-app",

apps/docs/.storybook/main.ts

@@ -15,9 +15,6 @@ const config: StorybookConfig = {
   core: {
     disableTelemetry: true,
   },
-  docs: {
-    autodocs: true,
-  },
 };
 
 export default config;

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

@@ -2,8 +2,8 @@
 import type { OnyxColor } from "sit-onyx";
 import { capitalize, computed, ref } from "vue";
 import ColorPaletteValue, { type ColorPaletteValueProps } from "./ColorPaletteValue.vue";
-import DesignToken from "./DesignToken.vue";
-import DesignTokenHeader from "./DesignTokenHeader.vue";
+import DesignVariable from "./DesignVariable.vue";
+import DesignVariableHeader from "./DesignVariableHeader.vue";
 
 const AVAILABLE_TABS = ["Base", "Text & Icons"] as const;
 type AvailableTab = (typeof AVAILABLE_TABS)[number];
@@ -92,7 +92,7 @@ const handleCopy = async (color: string) => {
 
 <template>
   <section class="palette">
-    <DesignTokenHeader
+    <DesignVariableHeader
       v-model="currentTab"
       :headline="capitalize(props.name)"
       :tabs="AVAILABLE_TABS"
@@ -108,7 +108,7 @@ const handleCopy = async (color: string) => {
         />
       </div>
 
-      <DesignToken
+      <DesignVariable
         class="palette__copied"
         v-if="copiedColor"
         :name="copiedColor"

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

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { DENSITIES, type Density } from "~components/../composables/density";
-import DesignTokenBadge from "./DesignTokenBadge.vue";
+import DesignVariableBadge from "./DesignVariableBadge.vue";
 
 const modelValue = defineModel<Density>({ default: "default" });
 </script>
 
 <template>
   <div class="densities">
-    <DesignTokenBadge
+    <DesignVariableBadge
       v-for="density in DENSITIES"
       :key="density"
       :text="density"

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

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

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

@@ -5,7 +5,7 @@ import OnyxIcon from "~components/OnyxIcon/OnyxIcon.vue";
 
 const props = withDefaults(
   defineProps<{
-    /** Token name. */
+    /** Variable name. */
     name: string;
     /** Value to display */
     value?: string;
@@ -17,7 +17,7 @@ const props = withDefaults(
      * @default "value"
      */
     type?: "color" | "value";
-    /** If true, the user will be able to click the token to copy its 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;
@@ -34,32 +34,32 @@ const emit = defineEmits<{
 
 <template>
   <button
-    class="token"
-    :class="{ 'token--color': props.type === 'color', 'token--copyable': props.allowCopy }"
+    class="variable"
+    :class="{ 'variable--color': props.type === 'color', 'variable--copyable': props.allowCopy }"
     :disabled="!props.allowCopy"
     @click="emit('copy')"
     @keyup.enter="emit('copy')"
   >
-    <div class="token__name" :class="{ 'token__name--no-value': !props.value }">
+    <div class="variable__name" :class="{ 'variable__name--no-value': !props.value }">
       <span>{{ props.name }}</span>
-      <span v-if="props.value && props.type === 'value'" class="token__value">
+      <span v-if="props.value && props.type === 'value'" class="variable__value">
         {{ props.value }}
       </span>
     </div>
 
-    <span v-if="props.isCopied" class="token__copied">
+    <span v-if="props.isCopied" class="variable__copied">
       <OnyxIcon :icon="checkIcon" />
       copied
     </span>
 
-    <OnyxIcon v-else class="token__copy" :icon="copyIcon" color="primary" />
+    <OnyxIcon v-else class="variable__copy" :icon="copyIcon" color="primary" />
   </button>
 </template>
 
 <style lang="scss" scoped>
 @use "@sit-onyx/vitepress-theme/mixins.scss";
 
-.token {
+.variable {
   display: flex;
   align-items: center;
   gap: var(--onyx-spacing-md);
@@ -112,7 +112,7 @@ const emit = defineEmits<{
 
     &:hover,
     &:focus-within {
-      .token {
+      .variable {
         &__name {
           border: var(--onyx-1px-in-rem) solid var(--onyx-color-base-primary-300);
         }
@@ -125,7 +125,7 @@ const emit = defineEmits<{
   }
 
   &--color {
-    .token {
+    .variable {
       &__name {
         &::after {
           content: "";

apps/docs/src/.vitepress/components/DesignTokenCard.stories.ts → apps/docs/src/.vitepress/components/DesignVariableCard.stories.ts

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
-import DesignTokenCard from "./DesignTokenCard.vue";
+import DesignVariableCard from "./DesignVariableCard.vue";
 
-const meta: Meta<typeof DesignTokenCard> = {
-  title: "tokens/DesignTokenCard",
-  component: DesignTokenCard,
+const meta: Meta<typeof DesignVariableCard> = {
+  title: "variables/DesignVariableCard",
+  component: DesignVariableCard,
 };
 
 export default meta;
-type Story = StoryObj<typeof DesignTokenCard>;
+type Story = StoryObj<typeof DesignVariableCard>;
 
 export const Default = {
   args: {

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

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import { getCssVariableValue } from "../utils-browser";
-import DesignToken from "./DesignToken.vue";
+import DesignVariable from "./DesignVariable.vue";
 
 const props = defineProps<{
-  /** Token name. */
+  /** Variable name. */
   name: string;
   /** If true, both columns will take up 50% of the available width. */
   wideName?: boolean;
-  /** Whether hide the token value. */
+  /** Whether hide the variable value. */
   hideValue?: boolean;
 }>();
 
@@ -36,7 +36,7 @@ const handleCopy = async () => {
           inside the browser/client
          -->
         <ClientOnly>
-          <DesignToken
+          <DesignVariable
             :name="props.name"
             :value="value"
             :is-copied="isCopied"

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import DesignVariableHeader from "./DesignVariableHeader.vue";
+
+const meta: Meta<typeof DesignVariableHeader> = {
+  title: "variables/DesignVariableHeader",
+  component: DesignVariableHeader,
+};
+
+export default meta;
+type Story = StoryObj<typeof DesignVariableHeader>;
+
+export const Default = {
+  args: {
+    headline: "Headline",
+    tabs: ["Tab 1", "Tab 2", "Tab 3"],
+    modelValue: "Tab 1",
+  },
+} satisfies Story;

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import OnyxBorderRadiusVariables from "./OnyxBorderRadiusVariables.vue";
+
+const meta: Meta<typeof OnyxBorderRadiusVariables> = {
+  title: "variables/OnyxBorderRadiusTokens",
+  component: OnyxBorderRadiusVariables,
+};
+
+export default meta;
+type Story = StoryObj<typeof OnyxBorderRadiusVariables>;
+
+export const Default = { args: {} } satisfies Story;

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import DesignTokenCard from "./DesignTokenCard.vue";
+import DesignVariableCard from "./DesignVariableCard.vue";
 
-const tokens = [
+const variables = [
   "onyx-radius-xs",
   "onyx-radius-sm",
   "onyx-radius-md",
@@ -12,27 +12,27 @@ const tokens = [
 </script>
 
 <template>
-  <DesignTokenCard
-    v-for="borderRadius in tokens"
+  <DesignVariableCard
+    v-for="borderRadius in variables"
     :key="borderRadius"
     :name="borderRadius"
-    class="token"
+    class="variable"
   >
     <figure
-      class="token__preview"
+      class="variable__preview"
       :class="{
-        'token__preview--large': borderRadius.endsWith('-xl') || borderRadius.endsWith('-full'),
+        'variable__preview--large': borderRadius.endsWith('-xl') || borderRadius.endsWith('-full'),
       }"
       :style="{
         borderTopRightRadius: `var(--${borderRadius})`,
         borderBottomRightRadius: `var(--${borderRadius})`,
       }"
     ></figure>
-  </DesignTokenCard>
+  </DesignVariableCard>
 </template>
 
 <style lang="scss" scoped>
-.token {
+.variable {
   margin-bottom: var(--onyx-spacing-lg);
 
   &__preview {
@@ -50,8 +50,8 @@ const tokens = [
     }
   }
 
-  // override token width so all border radius token names have the same width
-  :deep(.token__name) {
+  // override variable width so all border radius variable names have the same width
+  :deep(.variable__name) {
     min-width: 16rem;
   }
 }

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

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
 import { useData } from "vitepress";
 import ColorPalette from "./ColorPalette.vue";
-import DesignTokenBadge from "./DesignTokenBadge.vue";
+import DesignVariableBadge from "./DesignVariableBadge.vue";
 
 const { isDark } = useData();
 </script>
 
 <template>
   <div class="palettes">
     <div class="themes">
-      <DesignTokenBadge text="Light mode" :active="!isDark" @click="isDark = false" />
-      <DesignTokenBadge text="Dark mode" :active="isDark" @click="isDark = true" />
+      <DesignVariableBadge text="Light mode" :active="!isDark" @click="isDark = false" />
+      <DesignVariableBadge text="Dark mode" :active="isDark" @click="isDark = true" />
     </div>
 
     <ColorPalette name="primary" />