add basics for essential componentsui-kit-essentials

31 files changed, 598 insertions, 16 deletions

diff --git a/packages/studip-ui/src/components/SuiButton/SuiButton.vue b/packages/studip-ui/src/components/SuiButton/SuiButton.vue
new file mode 100644
index 0000000..27d9c53
--- /dev/null
+++ b/packages/studip-ui/src/components/SuiButton/SuiButton.vue
@@ -0,0 +1,39 @@
+<template>
+    <button 
+    class="sui-btn" 
+    :class="variantClass"
+    :disabled="disabled"
+  >
+  <SuiIcon 
+      v-if="icon && !iconRight" 
+      :name="icon" 
+      aria-hidden="true"
+      class="sui-btn__icon"
+    />
+    
+    <span v-if="label" class="sui-button__label">
+      {{ label }}
+    </span>
+
+    <SuiIcon 
+      v-if="icon && iconRight" 
+      :name="icon" 
+      aria-hidden="true"
+      class="sui-btn__icon"
+    />
+  </button>
+</template>
+<script setup>
+import { computed } from 'vue';
+import SuiIcon from './../SuiIcon/SuiIcon.vue';
+
+const props = defineProps({
+    label: { type: String, default: '' },
+    icon: { type: String, default: null },
+    iconRight: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    variant: { type: String, default: 'primary' }
+});
+
+const variantClass = computed(() => `sui-btn--${props.variant}`);
+</script>
\ No newline at end of file
diff --git a/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.stories.js b/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.stories.js
new file mode 100644
index 0000000..56c1dbb
--- /dev/null
+++ b/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.stories.js
@@ -0,0 +1,45 @@
+// SuiButtonGroup.stories.js
+import SuiButtonGroup from './SuiButtonGroup.vue';
+import SuiButton from './../SuiButton/SuiButton.vue';
+
+const meta = {
+  title: 'Stud.IP UI Elements/ButtonGroup',
+  component: SuiButtonGroup,
+  tags: ['autodocs', 'since:6.3.0', 'new', 'alpha'],
+  subcomponents: { SuiButton },
+  parameters: {
+        docs: {
+            description: {
+                component: ''
+            },
+        },
+    },
+    argTypes: {}
+};
+
+
+
+export default meta;
+
+
+export const SlotValidationTest = {
+  args: {
+  },
+  render: (args) => ({
+    components: { SuiButtonGroup, SuiButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <SuiButtonGroup v-bind="args">
+        <SuiButton label="Button 1" />
+        <div style="background: red; padding: 10px; margin: 5px;">
+          Ich bin ein verbotenes DIV und sollte verschwinden!
+        </div>
+        <SuiButton label="Button 2"  />
+        <span>Ich bin ein verbotener Text und werde gefiltert.</span>
+        <SuiButton label="Button 3" disabled />
+      </SuiButtonGroup>
+    `,
+  }),
+};
\ No newline at end of file
diff --git a/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.vue b/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.vue
new file mode 100644
index 0000000..add111a
--- /dev/null
+++ b/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="button-group">
+    <component 
+      v-for="(vnode, index) in validButtons" 
+      :is="vnode" 
+      :key="index" 
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, useSlots } from 'vue';
+import { useSlotFilter } from './../../composables/';
+
+const slots = useSlots();
+const { getValidChildren } = useSlotFilter(slots);
+
+const validButtons = computed(() => getValidChildren('SuiButton'));
+</script>
+
+<style scoped>
+.button-group {
+  display: flex;
+  gap: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/packages/studip-ui/src/components/index.js b/packages/studip-ui/src/components/index.js
index 2fdf184..992fdab 100644
--- a/packages/studip-ui/src/components/index.js
+++ b/packages/studip-ui/src/components/index.js
@@ -1,8 +1,12 @@
+import SuiButton from './SuiButton/SuiButton.vue';
+import SuiButtonGroup from './SuiButtonGroup/SuiButtonGroup.vue';
 import SuiChip from './SuiChip/SuiChip.vue';
 import SuiFormattedTime from './SuiFormattedTime/SuiFormattedTime.vue';
 import SuiIcon from './SuiIcon/SuiIcon.vue';
 
 export {
+    SuiButton,
+    SuiButtonGroup,
     SuiChip,
     SuiFormattedTime,
     SuiIcon,
diff --git a/packages/studip-ui/src/composables/index.js b/packages/studip-ui/src/composables/index.js
index cb0ff5c..7ad2d99 100644
--- a/packages/studip-ui/src/composables/index.js
+++ b/packages/studip-ui/src/composables/index.js
@@ -1 +1 @@
-export {};
+export { useSlotFilter } from './useSlotFilter.js';
\ No newline at end of file
diff --git a/packages/studip-ui/src/composables/useSlotFilter.js b/packages/studip-ui/src/composables/useSlotFilter.js
new file mode 100644
index 0000000..5b512d9
--- /dev/null
+++ b/packages/studip-ui/src/composables/useSlotFilter.js
@@ -0,0 +1,25 @@
+// useSlotFilter.js
+import { isVNode, Comment } from 'vue';
+
+export function useSlotFilter(slots) {
+  const getValidChildren = (componentName) => {
+    const rawNodes = slots.default ? slots.default() : [];
+
+    return rawNodes.filter(vnode => {
+      if (!isVNode(vnode) || vnode.type === Comment) return false;
+      
+      const isCorrectComponent = vnode.type?.name === componentName || 
+                                  vnode.type?.__name === componentName;
+
+      if (!isCorrectComponent) {
+        if (vnode.type !== Symbol.for('v-fgt')) {
+          console.warn(`[UI Kit] ButtonGroup: Element vom Typ "${vnode.type?.name || vnode.type}" wurde entfernt.`);
+        }
+        return false;
+      }
+      return true;
+    });
+  };
+
+  return { getValidChildren };
+}
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/components/_btn.scss b/packages/studip-ui/src/styles/components/_btn.scss
new file mode 100644
index 0000000..d16ce18
--- /dev/null
+++ b/packages/studip-ui/src/styles/components/_btn.scss
@@ -0,0 +1,27 @@
+.sui-btn {
+  appearance: none;
+  background: var(--color--global-background);
+  border: 1px solid var(--color--highlight);
+  border-radius: 4px;
+  color: var(--color--highlight);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.3;
+  padding: 7px 14px;
+  text-align: center;
+  white-space: nowrap;
+  transition: background-color 0.2s, color 0.2s;
+  margin: 0;
+
+  &:hover:not(:disabled) {
+    background-color: var(--color--highlight);
+    color: var(--color--highlight-contrast);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    background: var(--color--button-inactive-background);
+  }
+}
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/components/index.scss b/packages/studip-ui/src/styles/components/index.scss
new file mode 100644
index 0000000..f5656bf
--- /dev/null
+++ b/packages/studip-ui/src/styles/components/index.scss
@@ -0,0 +1 @@
+@use 'btn' as btn;
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/main.scss b/packages/studip-ui/src/styles/main.scss
index 0b41bc6..b7ca1e9 100644
--- a/packages/studip-ui/src/styles/main.scss
+++ b/packages/studip-ui/src/styles/main.scss
@@ -1,2 +1,3 @@
-@use 'tokens/index.scss'; 
-@use 'reset';
\ No newline at end of file
+@use 'tokens/index.scss' as tokens; 
+@use 'reset';
+@use 'utilities/index.scss' as utilities;
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/_base.scss b/packages/studip-ui/src/styles/tokens/_base.scss
new file mode 100644
index 0000000..20ab118
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/_base.scss
@@ -0,0 +1,7 @@
+$base: (
+    content: (),
+    sidebar: (),
+    mainnav: (),
+    topbar: (),
+    footer: ()
+);
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/_elevation.scss b/packages/studip-ui/src/styles/tokens/_elevation.scss
new file mode 100644
index 0000000..2517898
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/_elevation.scss
@@ -0,0 +1 @@
+$ref-elevation: ();
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/_opacity.scss b/packages/studip-ui/src/styles/tokens/_opacity.scss
new file mode 100644
index 0000000..63bb7c1
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/_opacity.scss
@@ -0,0 +1,9 @@
+@use 'sass:map';
+@use 'sass:math';
+
+$ref-opacity: ();
+
+@for $i from 0 through 10 {
+    $step: $i * 10;
+    $ref-opacity: map.merge($ref-opacity, ("#{$step}": math.div($step, 100)));
+}
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/_radius.scss b/packages/studip-ui/src/styles/tokens/_radius.scss
new file mode 100644
index 0000000..497a66e
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/_radius.scss
@@ -0,0 +1,14 @@
+$sys-radius: (
+    'xs': var(--ref-size-025),
+    'sm': var(--ref-size-050),
+    'md': var(--ref-size-100),
+    'lg': var(--ref-size-200),
+    'container': (
+        'inner-sm': var(--sys-spacing-xs),
+        'outer-sm': calc(var(--sys-radius-sm) + var(--sys-spacing-sm)),
+        'inner-md': var(--sys-spacing-sm),
+        'outer-md': calc(var(--sys-radius-md) + var(--sys-spacing-md)),
+        'inner-lg': var(--sys-spacing-md),
+        'outer-lg': calc(var(--sys-radius-lg) + var(--sys-spacing-lg)),
+    ),
+);
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/_sizes.scss b/packages/studip-ui/src/styles/tokens/_sizes.scss
new file mode 100644
index 0000000..40038e3
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/_sizes.scss
@@ -0,0 +1,25 @@
+@use 'sass:math';
+@use 'sass:map';
+
+$size-base: 0.5rem;
+
+@function get-size($value) {
+    @return math.div($value, 100) * $size-base;
+}
+
+$ref-sizes: (
+    0: 0,
+    025: get-size(25),
+    050: get-size(50),
+    075: get-size(75),
+    100: get-size(100),
+    150: get-size(150),
+    200: get-size(200),
+    250: get-size(250),
+    300: get-size(300),
+    400: get-size(400),
+    500: get-size(500),
+    600: get-size(600),
+    800: get-size(800),
+    1000: get-size(1000),
+);
diff --git a/packages/studip-ui/src/styles/tokens/_spacing.scss b/packages/studip-ui/src/styles/tokens/_spacing.scss
index e69de29..db67042 100644
--- a/packages/studip-ui/src/styles/tokens/_spacing.scss
+++ b/packages/studip-ui/src/styles/tokens/_spacing.scss
@@ -0,0 +1,15 @@
+$sys-spacing: (
+'stack-xs': var(--ref-size-025),
+'stack-sm': var(--ref-size-050),
+'stack-md': var(--ref-size-100),
+'inline-xs': var(--ref-size-025),
+'inline-sm': var(--ref-size-050),
+'inline-md': var(--ref-size-100),
+'inset-square-md': var(--ref-size-100),
+'inset-squish-sm-v': var(--ref-size-025),
+'inset-squish-sm-h': var(--ref-size-050),
+'inset-squish-md-v': var(--ref-size-050),
+'inset-squish-md-h': var(--ref-size-100),
+'inset-stretch-md-v': var(--ref-size-150),
+'inset-stretch-md-h': var(--ref-size-100)
+);
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/_transition.scss b/packages/studip-ui/src/styles/tokens/_transition.scss
new file mode 100644
index 0000000..00d1efc
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/_transition.scss
@@ -0,0 +1 @@
+$ref-transition: ();
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/colors/_action.scss b/packages/studip-ui/src/styles/tokens/colors/_action.scss
new file mode 100644
index 0000000..0ce64c7
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/colors/_action.scss
@@ -0,0 +1,17 @@
+$theme-bundle: (
+    'light': (
+        'primary': 'var(--ref-color-blue-600)',
+        'subtle': 'var(--ref-color-blue-50)',
+    ),
+    'dark': (
+        'primary': 'var(--ref-color-blue-400)',
+        'subtle': 'var(--ref-color-blue-950)',
+    ),
+    'hc': (
+        'primary': 'var(--ref-color-blue-900)',
+        'subtle': 'var(--ref-white)',
+    ),
+    'dhc-adj': (
+        'primary': 'var(--ref-color-blue-100)',
+    )
+);
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/colors/_border.scss b/packages/studip-ui/src/styles/tokens/colors/_border.scss
new file mode 100644
index 0000000..fea72b2
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/colors/_border.scss
@@ -0,0 +1,10 @@
+$theme-bundle: (
+    'light': (
+    ),
+    'dark': (
+    ),
+    'hc': (
+    ),
+    'dhc-adj': (
+    )
+);
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/colors/_brand.scss b/packages/studip-ui/src/styles/tokens/colors/_brand.scss
new file mode 100644
index 0000000..0e58574
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/colors/_brand.scss
@@ -0,0 +1,11 @@
+$theme-bundle: (
+    'light': (
+        'primary': 'var(--ref-color-blue-900)',
+    ),
+    'dark': (
+    ),
+    'hc': (
+    ),
+    'dhc-adj': (
+    )
+);
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/colors/_color.scss b/packages/studip-ui/src/styles/tokens/colors/_color.scss
new file mode 100644
index 0000000..25bdd53
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/colors/_color.scss
@@ -0,0 +1,119 @@
+$ref-color: (
+    'black': #000000,
+
+    'blue': (
+        0: #cbd3e0,
+        50: #c0cad9,
+        100: #b5c1d3,
+        150: #aab7cc,
+        200: #a0aec5,
+        250: #95a5bf,
+        300: #8a9cb8,
+        350: #7f93b1,
+        400: #7489ab,
+        450: #6980a4,
+        500: #5e779d,
+        550: #536e97,
+        600: #496590,
+        650: #3e5b89,
+        700: #335283,
+        750: #28497c,
+        800: #223e69,
+        850: #1c3356,
+        900: #162844,
+        950: #101d31,
+        1000: #0a121e,
+    ),
+
+    'gray': (
+        0: #fbfbfc,
+        50: #f5f5f7,
+        100: #ededed,
+        150: #e2e2e3,
+        200: #d8d8d8,
+        300: #c0c0c0,
+        400: #a8a8a8,
+        500: #909090,
+        600: #676767,
+        700: #525961,
+        800: #3c454e,
+        850: #262d35,
+        900: #101010,
+        950: #0a0a0b,
+        1000: #050505,
+    ),
+
+    'green': (
+        0: #dcebc6,
+        50: #cee3af,
+        100: #c1dc99,
+        150: #b3d482,
+        200: #a5cc6b,
+        250: #97c454,
+        300: #8abd3e,
+        350: #7cb527,
+        400: #6ead10,
+        450: #67a20f,
+        500: #60970e,
+        550: #598c0d,
+        600: #52810c,
+        650: #4b760b,
+        700: #446c0a,
+        750: #3d6109,
+        800: #365608,
+        850: #2f4b07,
+        900: #284006,
+        950: #213505,
+        1000: #1a2a04,
+    ),
+
+    'red': (
+        0: #f5c2c2,
+        50: #f2b2b2,
+        100: #f0a2a2,
+        150: #ed9292,
+        200: #eb8181,
+        250: #e87171,
+        300: #e66161,
+        350: #e35151,
+        400: #e04141,
+        450: #de3131,
+        500: #db2020,
+        550: #d91010,
+        600: #d60000,
+        650: #c20000,
+        700: #ad0000,
+        750: #990000,
+        800: #850000,
+        850: #700000,
+        900: #5c0000,
+        950: #470000,
+        1000: #330000,
+    ),
+
+    'white': #ffffff,
+
+    'yellow': (
+        0: #ffefce,
+        50: #ffe5af,
+        100: #ffdb90,
+        150: #ffd071,
+        200: #ffc652,
+        250: #ffbc33,
+        300: #f2b230,
+        350: #e5a92e,
+        400: #d89f2b,
+        450: #cb9629,
+        500: #be8c26,
+        550: #b18323,
+        600: #a47921,
+        650: #98701e,
+        700: #8b661c,
+        750: #7e5d19,
+        800: #715316,
+        850: #644a14,
+        900: #574011,
+        950: #4a370f,
+        1000: #3d2d0c,
+    ),
+);
diff --git a/packages/studip-ui/src/styles/tokens/colors/_content.scss b/packages/studip-ui/src/styles/tokens/colors/_content.scss
new file mode 100644
index 0000000..fea72b2
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/colors/_content.scss
@@ -0,0 +1,10 @@
+$theme-bundle: (
+    'light': (
+    ),
+    'dark': (
+    ),
+    'hc': (
+    ),
+    'dhc-adj': (
+    )
+);
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/colors/_feedback.scss b/packages/studip-ui/src/styles/tokens/colors/_feedback.scss
new file mode 100644
index 0000000..fea72b2
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/colors/_feedback.scss
@@ -0,0 +1,10 @@
+$theme-bundle: (
+    'light': (
+    ),
+    'dark': (
+    ),
+    'hc': (
+    ),
+    'dhc-adj': (
+    )
+);
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/colors/_graphic.scss b/packages/studip-ui/src/styles/tokens/colors/_graphic.scss
new file mode 100644
index 0000000..fea72b2
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/colors/_graphic.scss
@@ -0,0 +1,10 @@
+$theme-bundle: (
+    'light': (
+    ),
+    'dark': (
+    ),
+    'hc': (
+    ),
+    'dhc-adj': (
+    )
+);
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/colors/_structure.scss b/packages/studip-ui/src/styles/tokens/colors/_structure.scss
new file mode 100644
index 0000000..fea72b2
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/colors/_structure.scss
@@ -0,0 +1,10 @@
+$theme-bundle: (
+    'light': (
+    ),
+    'dark': (
+    ),
+    'hc': (
+    ),
+    'dhc-adj': (
+    )
+);
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/colors/_surface.scss b/packages/studip-ui/src/styles/tokens/colors/_surface.scss
new file mode 100644
index 0000000..09e7297
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/colors/_surface.scss
@@ -0,0 +1,48 @@
+$theme-bundle: (
+    'light': (
+        brand: (
+            'permanent': 'var(--ref-color-blue-900)',
+            'accent': 'var(--ref-color-blue-700)',
+        ),
+        canvas: (
+            'default': 'var(--ref-color-gray-50)',
+            'subtle': 'var(--ref-color-gray-100)',
+        ),
+        card: (
+            'default': 'var(--ref-color-white)',
+            'elevated': 'var(--ref-color-white)',
+        ),
+        error: (
+            'subtle': 'var(--ref-color-red-100)',
+            'default': 'var(--ref-color-red-200)',
+        ),
+        info: (
+            'subtle': 'var(--ref-color-blue-100)',
+            'default': 'var(--ref-color-blue-200)',
+        ),
+        interactive: (
+            'hover': 'var(--ref-color-gray-100)',
+            'selected': 'var(--ref-color-blue-50)',
+            'active': 'var(--ref-color-blue-100)',
+        ),
+        modal: (
+            'default': 'var(--ref-color-white)',
+            'overlay':
+                'color-mix(in oklab, var(--ref-color-black) var(--ref-opacity-60), transparent)',
+        ),
+        neutral: (
+            'subtle': 'var(--ref-color-gray-100)',
+            'strong': 'var(--ref-color-gray-300)',
+        ),
+        sunken: (
+            'default': 'var(--ref-color-gray-200)',
+        ),
+        warning: (
+            'subtle': 'var(--ref-color-yellow-100)',
+            'default': 'var(--ref-color-yellow-200)',
+        ),
+    ),
+    'dark': (),
+    'hc': (),
+    'dhc-adj': (),
+);
diff --git a/packages/studip-ui/src/styles/tokens/colors/_text.scss b/packages/studip-ui/src/styles/tokens/colors/_text.scss
new file mode 100644
index 0000000..fea72b2
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/colors/_text.scss
@@ -0,0 +1,10 @@
+$theme-bundle: (
+    'light': (
+    ),
+    'dark': (
+    ),
+    'hc': (
+    ),
+    'dhc-adj': (
+    )
+);
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/colors/_utils.scss b/packages/studip-ui/src/styles/tokens/colors/_utils.scss
new file mode 100644
index 0000000..7401d38
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/colors/_utils.scss
@@ -0,0 +1,10 @@
+// _utils.scss
+@use 'sass:map';
+
+@function prepare-tokens($theme, $light, $dark, $hc, $dhc-adj) {
+    @if $theme == 'light' { @return $light; }
+    @if $theme == 'dark' { @return $dark; }
+    @if $theme == 'hc' { @return $hc; }
+    @if $theme == 'dhc' { @return map.merge($dark, $dhc-adj); }
+    @return ();
+}
\ No newline at end of file
diff --git a/packages/studip-ui/src/styles/tokens/_colors.scss b/packages/studip-ui/src/styles/tokens/colors/index.scss
index 1136880..a0cc838 100644
--- a/packages/studip-ui/src/styles/tokens/_colors.scss
+++ b/packages/studip-ui/src/styles/tokens/colors/index.scss
@@ -1,3 +1,33 @@
+@use 'sass:map';
+
+// references
+@use 'color' as color;
+
+$ref-color: color.$ref-color;
+
+// system (semantics)
+@use 'action' as action;
+@use 'border' as border;
+@use 'brand' as brand;
+@use 'content' as content;
+@use 'feedback' as feedback;
+@use 'graphic' as graphic;
+@use 'text' as text;
+@use 'structure' as structure;
+@use 'surface' as surface;
+
+$semantic-registry: (
+    'action': action.$theme-bundle,
+    'border': border.$theme-bundle,
+    'brand': brand.$theme-bundle,
+    'content': content.$theme-bundle,
+    'feedback': feedback.$theme-bundle,
+    'graphic': graphic.$theme-bundle,
+    'text': text.$theme-bundle,
+    'structure': structure.$theme-bundle,
+    'surface': surface.$theme-bundle,
+);
+
 // base colors
 $color--black: #000;
 $color--blue-1: #28497c;
@@ -27,18 +57,17 @@ $color--font-secondary: $color--gray-3;
 $color--font-inactive: $color--gray-3;
 $color--font-inverted: $color--white;
 
-
 $color--brand-primary: $color--blue-1;
 $color--brand-primary-contrast: $color--font-inverted;
 $color--brand-secondary: $color--gray-2;
 $color--brand-secondary-contrast: $color--font-inverted;
 
-$color--highlight: $color--blue-1;  
-$color--highlight-hover: $color--red-1;  
+$color--highlight: $color--blue-1;
+$color--highlight-hover: $color--red-1;
 $color--highlight-contrast: $color--font-inverted;
 
-$color--content-link: $color--blue-1; 
-$color--content-link-hover: $color--red-1; 
+$color--content-link: $color--blue-1;
+$color--content-link-hover: $color--red-1;
 
 $color--sidebar-item: $color--blue-1;
 $color--sidebar-item-hover: $color--gray-1;
@@ -137,4 +166,4 @@ $color--info-secondary-contrast: $color--font-primary;
 $color--image-placeholder-background: $color--gray-6;
 $color--image-placeholder-icon: $color--gray-4;
 
-$color-header-inverted: $color--white;
\ No newline at end of file
+$color-header-inverted: $color--white;
diff --git a/packages/studip-ui/src/styles/tokens/components/_button.scss b/packages/studip-ui/src/styles/tokens/components/_button.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/components/_button.scss
diff --git a/packages/studip-ui/src/styles/tokens/components/index.scss b/packages/studip-ui/src/styles/tokens/components/index.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/packages/studip-ui/src/styles/tokens/components/index.scss
diff --git a/packages/studip-ui/src/styles/tokens/index.scss b/packages/studip-ui/src/styles/tokens/index.scss
index 575e62e..4c5e803 100644
--- a/packages/studip-ui/src/styles/tokens/index.scss
+++ b/packages/studip-ui/src/styles/tokens/index.scss
@@ -1,9 +1,56 @@
-@use './_colors.scss' as colors;
-@use './_spacing.scss' as spacing;
-@use './_typography.scss' as typography;
+@use 'sass:map';
+@use 'sass:meta';
+
+@use 'base' as base;
+@use 'colors' as colors;
+@use 'opacity' as opacity;
+@use 'radius' as radius;
+@use 'spacing' as spacing;
+@use 'sizes' as sizes;
+@use 'typography' as typography;
+
+
+
+@mixin generate-tokens($map, $prefix) {
+    @each $key, $value in $map {
+        @if meta.type-of($value) == 'map' {
+            @include generate-tokens($value, #{$prefix}-#{$key});
+        } @else {
+            --#{$prefix}-#{$key}: #{$value};
+        }
+    }
+}
+
+@mixin generate-theme($theme-key) {
+    @each $name, $bundle in colors.$semantic-registry {
+        $map: ();
 
+        @if $theme-key == 'dhc' {
+            $dark: map.get($bundle, 'dark');
+            $adj: map.get($bundle, 'dhc-adj');
+            $map: map.merge($dark, $adj);
+        } @else {
+            $map: map.get($bundle, $theme-key);
+        }
 
+        @include generate-tokens($map, 'sys-color-#{$name}');
+    }
+}
 :root {
+    // references
+    @include generate-tokens(colors.$ref-color, 'ref-color');
+    @include generate-tokens(opacity.$ref-opacity, 'ref-opacity');
+    @include generate-tokens(sizes.$ref-sizes, 'ref-sizes');
+
+    // system (semantics)
+    @include generate-theme('light'); // semantic colors
+    @include generate-tokens(spacing.$sys-spacing, 'sys-spacing');
+    @include generate-tokens(radius.$sys-radius, 'sys-radius');
+
+
+    // base & components
+    // @include generate-tokens(base.$base, 'base');
+
     // Farben
 
     --color--black: #{colors.$color--black};
@@ -141,8 +188,9 @@
     --color--image-placeholder-icon: #{colors.$color--image-placeholder-icon};
 
     --color--header-inverted: #{colors.$color-header-inverted};
-
-    // Abstände
-
-    // Schriften
 }
+
+// once when we will have a dark mode
+// [data-theme='dark'] { @include generate-theme('dark'); }
+// [data-theme='high-contrast'] { @include generate-theme('hc'); }
+// [data-theme='dark-high-contrast'] { @include generate-theme('dhc'); }
\ No newline at end of file