@revikornmann/muka-ui 0.4.0 → 0.4.1

package/dist/styles/wireframe-dark.css

@@ -5532,6 +5532,53 @@ body {
 }
 
 
+/* PullToRefresh */
+/* PullToRefresh Component Styles */
+
+.muka-pull-to-refresh {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.muka-pull-to-refresh__indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: var(--spacing-2);
+  color: var(--color-text-subtle-default);
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.muka-pull-to-refresh__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.16s ease;
+}
+
+.muka-pull-to-refresh__scroller {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  overflow-x: clip;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
+  touch-action: pan-y;
+  will-change: transform;
+}
+
+
 /* Progress */
 /* Progress Component Styles - Using Muka Design Tokens */
 
@@ -5704,53 +5751,6 @@ body {
 }
 
 
-/* PullToRefresh */
-/* PullToRefresh Component Styles */
-
-.muka-pull-to-refresh {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.muka-pull-to-refresh__indicator {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding-bottom: var(--spacing-2);
-  color: var(--color-text-subtle-default);
-  overflow: hidden;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.muka-pull-to-refresh__chevron {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.16s ease;
-}
-
-.muka-pull-to-refresh__scroller {
-  flex: 1 1 auto;
-  min-height: 0;
-  width: 100%;
-  overflow-x: clip;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior-y: contain;
-  touch-action: pan-y;
-  will-change: transform;
-}
-
-
 /* ProfileBadge */
 /* ProfileBadge Component Styles - Using Muka Design Tokens */
 
@@ -6871,47 +6871,6 @@ li.muka-listitem {
 }
 
 
-/* Label */
-/* Label Component Styles - Using Muka Design Tokens */
-
-.muka-label {
-  display: inline-flex;
-  align-items: center;
-  color: var(--color-text-default-default);
-  cursor: pointer;
-}
-
-.muka-label--sm {
-  font-family: var(--text-label-sm-semibold-fontFamily);
-  font-weight: var(--text-label-sm-semibold-fontWeight);
-  font-size: var(--text-label-sm-semibold-fontSize);
-  line-height: var(--text-label-sm-semibold-lineHeight);
-}
-
-.muka-label--md {
-  font-family: var(--text-label-md-semibold-fontFamily);
-  font-weight: var(--text-label-md-semibold-fontWeight);
-  font-size: var(--text-label-md-semibold-fontSize);
-  line-height: var(--text-label-md-semibold-lineHeight);
-}
-
-.muka-label--lg {
-  font-family: var(--text-label-lg-semibold-fontFamily);
-  font-weight: var(--text-label-lg-semibold-fontWeight);
-  font-size: var(--text-label-lg-semibold-fontSize);
-  line-height: var(--text-label-lg-semibold-lineHeight);
-}
-
-.muka-label--disabled {
-  color: var(--color-text-subtle-default);
-  cursor: not-allowed;
-}
-
-.muka-label__required {
-  color: var(--color-state-error-foreground);
-}
-
-
 /* Input */
 /* Input Component Styles - Using Muka Design Tokens */
 
@@ -7604,6 +7563,47 @@ li.muka-listitem {
 }
 
 
+/* Label */
+/* Label Component Styles - Using Muka Design Tokens */
+
+.muka-label {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-label--sm {
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+}
+
+.muka-label--md {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
+.muka-label--lg {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-label--disabled {
+  color: var(--color-text-subtle-default);
+  cursor: not-allowed;
+}
+
+.muka-label__required {
+  color: var(--color-state-error-foreground);
+}
+
+
 /* FAB */
 /* FAB (Floating Action Button) Component Styles */
 

package/dist/styles/wireframe-light.css

@@ -5532,6 +5532,53 @@ body {
 }
 
 
+/* PullToRefresh */
+/* PullToRefresh Component Styles */
+
+.muka-pull-to-refresh {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.muka-pull-to-refresh__indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: var(--spacing-2);
+  color: var(--color-text-subtle-default);
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.muka-pull-to-refresh__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.16s ease;
+}
+
+.muka-pull-to-refresh__scroller {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  overflow-x: clip;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
+  touch-action: pan-y;
+  will-change: transform;
+}
+
+
 /* Progress */
 /* Progress Component Styles - Using Muka Design Tokens */
 
@@ -5704,53 +5751,6 @@ body {
 }
 
 
-/* PullToRefresh */
-/* PullToRefresh Component Styles */
-
-.muka-pull-to-refresh {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.muka-pull-to-refresh__indicator {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding-bottom: var(--spacing-2);
-  color: var(--color-text-subtle-default);
-  overflow: hidden;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.muka-pull-to-refresh__chevron {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.16s ease;
-}
-
-.muka-pull-to-refresh__scroller {
-  flex: 1 1 auto;
-  min-height: 0;
-  width: 100%;
-  overflow-x: clip;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior-y: contain;
-  touch-action: pan-y;
-  will-change: transform;
-}
-
-
 /* ProfileBadge */
 /* ProfileBadge Component Styles - Using Muka Design Tokens */
 
@@ -6871,47 +6871,6 @@ li.muka-listitem {
 }
 
 
-/* Label */
-/* Label Component Styles - Using Muka Design Tokens */
-
-.muka-label {
-  display: inline-flex;
-  align-items: center;
-  color: var(--color-text-default-default);
-  cursor: pointer;
-}
-
-.muka-label--sm {
-  font-family: var(--text-label-sm-semibold-fontFamily);
-  font-weight: var(--text-label-sm-semibold-fontWeight);
-  font-size: var(--text-label-sm-semibold-fontSize);
-  line-height: var(--text-label-sm-semibold-lineHeight);
-}
-
-.muka-label--md {
-  font-family: var(--text-label-md-semibold-fontFamily);
-  font-weight: var(--text-label-md-semibold-fontWeight);
-  font-size: var(--text-label-md-semibold-fontSize);
-  line-height: var(--text-label-md-semibold-lineHeight);
-}
-
-.muka-label--lg {
-  font-family: var(--text-label-lg-semibold-fontFamily);
-  font-weight: var(--text-label-lg-semibold-fontWeight);
-  font-size: var(--text-label-lg-semibold-fontSize);
-  line-height: var(--text-label-lg-semibold-lineHeight);
-}
-
-.muka-label--disabled {
-  color: var(--color-text-subtle-default);
-  cursor: not-allowed;
-}
-
-.muka-label__required {
-  color: var(--color-state-error-foreground);
-}
-
-
 /* Input */
 /* Input Component Styles - Using Muka Design Tokens */
 
@@ -7604,6 +7563,47 @@ li.muka-listitem {
 }
 
 
+/* Label */
+/* Label Component Styles - Using Muka Design Tokens */
+
+.muka-label {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-label--sm {
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+}
+
+.muka-label--md {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
+.muka-label--lg {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-label--disabled {
+  color: var(--color-text-subtle-default);
+  cursor: not-allowed;
+}
+
+.muka-label__required {
+  color: var(--color-state-error-foreground);
+}
+
+
 /* FAB */
 /* FAB (Floating Action Button) Component Styles */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revikornmann/muka-ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Muka Design System - Multi-brand design tokens and React components",
   "main": "dist/cjs/components/index.js",
   "module": "dist/esm/components/index.js",

package/tokens/t2-alias/brand/bouwplan/dark.json

@@ -6,58 +6,58 @@
   "alias": {
     "color": {
       "neutral": {
-        "1": { "$type": "color", "$value": "{color.slateDark.1}" },
-        "2": { "$type": "color", "$value": "{color.slateDark.2}" },
-        "3": { "$type": "color", "$value": "{color.slateDark.3}" },
-        "4": { "$type": "color", "$value": "{color.slateDark.4}" },
-        "5": { "$type": "color", "$value": "{color.slateDark.5}" },
-        "6": { "$type": "color", "$value": "{color.slateDark.6}" },
-        "7": { "$type": "color", "$value": "{color.slateDark.7}" },
-        "8": { "$type": "color", "$value": "{color.slateDark.8}" },
-        "9": { "$type": "color", "$value": "{color.slateDark.9}" },
-        "10": { "$type": "color", "$value": "{color.slateDark.10}" },
-        "11": { "$type": "color", "$value": "{color.slateDark.11}" },
-        "12": { "$type": "color", "$value": "{color.slateDark.12}" }
+        "1": { "$type": "color", "$value": "{color.sandDark.1}" },
+        "2": { "$type": "color", "$value": "{color.sandDark.2}" },
+        "3": { "$type": "color", "$value": "{color.sandDark.3}" },
+        "4": { "$type": "color", "$value": "{color.sandDark.4}" },
+        "5": { "$type": "color", "$value": "{color.sandDark.5}" },
+        "6": { "$type": "color", "$value": "{color.sandDark.6}" },
+        "7": { "$type": "color", "$value": "{color.sandDark.7}" },
+        "8": { "$type": "color", "$value": "{color.sandDark.8}" },
+        "9": { "$type": "color", "$value": "{color.sandDark.9}" },
+        "10": { "$type": "color", "$value": "{color.sandDark.10}" },
+        "11": { "$type": "color", "$value": "{color.sandDark.11}" },
+        "12": { "$type": "color", "$value": "{color.sandDark.12}" }
       },
       "brand": {
         "primary": {
-          "regular": { "$type": "color", "$value": "{color.blueDark.11}" },
-          "contrast": { "$type": "color", "$value": "{color.blueDark.12}" },
-          "muted": { "$type": "color", "$value": "{color.blueDark.3}" }
+          "regular": { "$type": "color", "$value": "{color.orangeDark.9}" },
+          "contrast": { "$type": "color", "$value": "{color.orangeDark.12}" },
+          "muted": { "$type": "color", "$value": "{color.orangeDark.3}" }
         },
         "secondary": {
-          "regular": { "$type": "color", "$value": "{color.cyanDark.8}" },
-          "contrast": { "$type": "color", "$value": "{color.cyanDark.11}" },
-          "muted": { "$type": "color", "$value": "{color.cyanDark.3}" }
+          "regular": { "$type": "color", "$value": "{color.orangeDark.8}" },
+          "contrast": { "$type": "color", "$value": "{color.orangeDark.10}" },
+          "muted": { "$type": "color", "$value": "{color.orangeDark.3}" }
         },
-        "default-deprecated": { "$type": "color", "$value": "{color.blueDark.9}" },
-        "contrast-deprecated": { "$type": "color", "$value": "{color.blueDark.12}" },
-        "muted-deprecated": { "$type": "color", "$value": "{color.blueDark.5}" }
+        "default-deprecated": { "$type": "color", "$value": "{color.orangeDark.9}" },
+        "contrast-deprecated": { "$type": "color", "$value": "{color.orangeDark.12}" },
+        "muted-deprecated": { "$type": "color", "$value": "{color.orangeDark.4}" }
       },
       "accent": {
-        "default": { "$type": "color", "$value": "{color.blueDark.11}" },
-        "hover": { "$type": "color", "$value": "{color.blueDark.12}" },
-        "pressed": { "$type": "color", "$value": "{color.blueDark.10}" },
-        "contrast": { "$type": "color", "$value": "{color.blueDark.12}" },
-        "muted": { "$type": "color", "$value": "{color.blueDark.6}" },
+        "default": { "$type": "color", "$value": "{color.orangeDark.9}" },
+        "hover": { "$type": "color", "$value": "{color.orangeDark.12}" },
+        "pressed": { "$type": "color", "$value": "{color.orangeDark.10}" },
+        "contrast": { "$type": "color", "$value": "{color.orangeDark.12}" },
+        "muted": { "$type": "color", "$value": "{color.orangeDark.7}" },
         "inverse": {
-          "default": { "$type": "color", "$value": "{color.blueDark.1}" },
-          "hover": { "$type": "color", "$value": "{color.blueDark.2}" },
-          "pressed": { "$type": "color", "$value": "{color.blueDark.2}" },
-          "contrast": { "$type": "color", "$value": "{color.blueDark.2}" },
-          "muted": { "$type": "color", "$value": "{color.blueDark.3}" }
+          "default": { "$type": "color", "$value": "{color.orangeDark.1}" },
+          "hover": { "$type": "color", "$value": "{color.orangeDark.2}" },
+          "pressed": { "$type": "color", "$value": "{color.orangeDark.2}" },
+          "contrast": { "$type": "color", "$value": "{color.orangeDark.2}" },
+          "muted": { "$type": "color", "$value": "{color.orangeDark.3}" }
         }
       },
       "state": {
         "success": {
-          "contrast": { "$type": "color", "$value": "{color.greenDark.12}" },
-          "default": { "$type": "color", "$value": "{color.greenDark.11}" },
-          "muted": { "$type": "color", "$value": "{color.greenDark.3}" },
+          "contrast": { "$type": "color", "$value": "{color.mintDark.12}" },
+          "default": { "$type": "color", "$value": "{color.mintDark.11}" },
+          "muted": { "$type": "color", "$value": "{color.mintDark.3}" },
           "surface": {
-            "level0": { "$type": "color", "$value": "{color.greenDark.2}" },
-            "level1": { "$type": "color", "$value": "{color.greenDark.3}" },
-            "level2": { "$type": "color", "$value": "{color.greenDark.4}" },
-            "level3": { "$type": "color", "$value": "{color.greenDark.5}" }
+            "level0": { "$type": "color", "$value": "{color.mintDark.2}" },
+            "level1": { "$type": "color", "$value": "{color.mintDark.3}" },
+            "level2": { "$type": "color", "$value": "{color.mintDark.4}" },
+            "level3": { "$type": "color", "$value": "{color.mintDark.5}" }
           }
         },
         "warning": {
@@ -94,14 +94,14 @@
           }
         },
         "neutral": {
-          "contrast": { "$type": "color", "$value": "{color.slateDark.11}" },
-          "default": { "$type": "color", "$value": "{color.slateDark.9}" },
-          "muted": { "$type": "color", "$value": "{color.slateDark.3}" },
+          "contrast": { "$type": "color", "$value": "{color.sandDark.11}" },
+          "default": { "$type": "color", "$value": "{color.sandDark.9}" },
+          "muted": { "$type": "color", "$value": "{color.sandDark.3}" },
           "surface": {
-            "level0": { "$type": "color", "$value": "{color.slateDark.2}" },
-            "level1": { "$type": "color", "$value": "{color.slateDark.3}" },
-            "level2": { "$type": "color", "$value": "{color.slateDark.4}" },
-            "level3": { "$type": "color", "$value": "{color.slateDark.5}" }
+            "level0": { "$type": "color", "$value": "{color.sandDark.2}" },
+            "level1": { "$type": "color", "$value": "{color.sandDark.3}" },
+            "level2": { "$type": "color", "$value": "{color.sandDark.4}" },
+            "level3": { "$type": "color", "$value": "{color.sandDark.5}" }
           }
         }
       }

package/tokens/t2-alias/brand/bouwplan/fonts.json

@@ -6,7 +6,7 @@
   "alias": {
     "font": {
       "brand": {
-        "family": { "$type": "fontFamilies", "$value": "Manrope" },
+        "family": { "$type": "fontFamilies", "$value": "Quicksand" },
         "weight": {
           "regular": { "$type": "fontWeights", "$value": "400" },
           "medium": { "$type": "fontWeights", "$value": "500" },
@@ -15,7 +15,7 @@
         }
       },
       "plain": {
-        "family": { "$type": "fontFamilies", "$value": "Manrope" },
+        "family": { "$type": "fontFamilies", "$value": "Quicksand" },
         "weight": {
           "regular": { "$type": "fontWeights", "$value": "400" },
           "medium": { "$type": "fontWeights", "$value": "500" },
@@ -24,7 +24,7 @@
         }
       },
       "mono": {
-        "family": { "$type": "fontFamilies", "$value": "JetBrains Mono" },
+        "family": { "$type": "fontFamilies", "$value": "Menlo" },
         "weight": {
           "regular": { "$type": "fontWeights", "$value": "Regular" },
           "bold": { "$type": "fontWeights", "$value": "Bold" }