@juwel-development/design-system 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/design-system.js +4 -4
  2. package/dist/index.css +1 -1
  3. package/package.json +1 -1
  4. package/src/Interaction/Button/Button.tsx +6 -4
  5. package/src/Theme/renderTokens.ts +19 -0
  6. package/src/tokens.css +13 -0
package/dist/design-system.js CHANGED
@@ -45,11 +45,11 @@ var r = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, i = n, a = ((
45
45
  r
46
46
  ] : e;
47
47
  }, []), n?.class, n?.className);
48
- })("py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover cursor-pointer disabled:cursor-not-allowed select-none text-nowrap inline-flex flex-row items-center justify-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface", {
48
+ })("transition-colors duration-[var(--motion-duration-color)] py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover cursor-pointer disabled:cursor-not-allowed select-none text-nowrap inline-flex flex-row items-center justify-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface", {
49
49
  variants: { variant: {
50
- primary: "px-4 sm:px-6 min-w-42 bg-primary text-primary-foreground rounded-lg transition-all duration-200 hover:bg-primary-hover focus-visible:ring-primary-ring",
51
- secondary: "px-4 sm:px-6 min-w-42 bg-secondary text-secondary-foreground rounded-lg transition-all duration-200 hover:bg-secondary-hover focus-visible:ring-secondary-ring",
52
- ghost: "px-2 min-w-0 bg-transparent text-foreground hover:underline transition-all duration-200 focus-visible:ring-ring"
50
+ primary: "px-4 sm:px-6 min-w-42 bg-primary text-primary-foreground rounded-lg hover:bg-primary-hover focus-visible:ring-primary-ring",
51
+ secondary: "px-4 sm:px-6 min-w-42 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary-hover focus-visible:ring-secondary-ring",
52
+ ghost: "px-2 min-w-0 bg-transparent text-foreground hover:underline focus-visible:ring-ring"
53
53
  } },
54
54
  defaultVariants: { variant: "primary" }
55
55
  }), o = ({ children: t, disabled: n, testId: r, variant: i, onClick$: o, ariaLabel: s, type: c = "button" }) => /* @__PURE__ */ e("button", {
package/dist/index.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-foreground:var(--color-foreground);--color-muted:var(--color-muted);--color-border:var(--color-border);--color-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);--color-primary-foreground:var(--color-primary-foreground);--color-primary-ring:var(--color-primary-ring);--color-secondary:var(--color-secondary);--color-secondary-hover:var(--color-secondary-hover);--color-secondary-foreground:var(--color-secondary-foreground);--color-secondary-ring:var(--color-secondary-ring);--color-disabled:var(--color-disabled);--color-disabled-hover:var(--color-disabled-hover);--color-ring:var(--color-ring);--color-success:var(--color-success);--color-warning:var(--color-warning);--color-error:var(--color-error);--color-info:var(--color-info)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.fixed{position:fixed}.static{position:static}.block{display:block}.contents{display:contents}.inline{display:inline}.inline-flex{display:inline-flex}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.grow{flex-grow:1}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-border{border-color:var(--color-border)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-transparent{background-color:#0000}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2{padding-block:calc(var(--spacing) * 2)}.text-nowrap{text-wrap:nowrap}.text-foreground{color:var(--color-foreground)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-primary-ring:focus-visible{--tw-ring-color:var(--color-primary-ring)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--color-ring)}.focus-visible\:ring-secondary-ring:focus-visible{--tw-ring-color:var(--color-secondary-ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-surface:focus-visible{--tw-ring-offset-color:var(--color-surface)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-2{padding-block:calc(var(--spacing) * 2)}}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-primary:#8b5cf6;--color-primary-hover:#7c3aed;--color-primary-foreground:#f8fafc;--color-primary-ring:#a78bfa;--color-secondary:#0ea5e9;--color-secondary-hover:#0284c7;--color-secondary-foreground:#f8fafc;--color-secondary-ring:#38bdf8;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-ring:#94a3b8;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#d63384;--color-info:#06b6d4}.dark{--color-surface:#0f172a;--color-foreground:#f8fafc;--color-muted:#94a3b8;--color-border:#334155;--color-primary:#7c3aed;--color-primary-hover:#8b5cf6;--color-primary-foreground:#f8fafc;--color-primary-ring:#a78bfa;--color-secondary:#0284c7;--color-secondary-hover:#0ea5e9;--color-secondary-foreground:#f8fafc;--color-secondary-ring:#38bdf8;--color-disabled:#475569;--color-disabled-hover:#334155;--color-ring:#64748b;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-info:#22d3ee}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}
2
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-foreground:var(--color-foreground);--color-muted:var(--color-muted);--color-border:var(--color-border);--color-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);--color-primary-foreground:var(--color-primary-foreground);--color-primary-ring:var(--color-primary-ring);--color-secondary:var(--color-secondary);--color-secondary-hover:var(--color-secondary-hover);--color-secondary-foreground:var(--color-secondary-foreground);--color-secondary-ring:var(--color-secondary-ring);--color-disabled:var(--color-disabled);--color-disabled-hover:var(--color-disabled-hover);--color-ring:var(--color-ring);--color-success:var(--color-success);--color-warning:var(--color-warning);--color-error:var(--color-error);--color-info:var(--color-info)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.fixed{position:fixed}.static{position:static}.block{display:block}.contents{display:contents}.inline{display:inline}.inline-flex{display:inline-flex}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.grow{flex-grow:1}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-border{border-color:var(--color-border)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-transparent{background-color:#0000}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2{padding-block:calc(var(--spacing) * 2)}.text-nowrap{text-wrap:nowrap}.text-foreground{color:var(--color-foreground)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-\[var\(--motion-duration-color\)\]{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-primary-ring:focus-visible{--tw-ring-color:var(--color-primary-ring)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--color-ring)}.focus-visible\:ring-secondary-ring:focus-visible{--tw-ring-color:var(--color-secondary-ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-surface:focus-visible{--tw-ring-offset-color:var(--color-surface)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-2{padding-block:calc(var(--spacing) * 2)}}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-primary:#8b5cf6;--color-primary-hover:#7c3aed;--color-primary-foreground:#f8fafc;--color-primary-ring:#a78bfa;--color-secondary:#0ea5e9;--color-secondary-hover:#0284c7;--color-secondary-foreground:#f8fafc;--color-secondary-ring:#38bdf8;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-ring:#94a3b8;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#d63384;--color-info:#06b6d4}.dark{--color-surface:#0f172a;--color-foreground:#f8fafc;--color-muted:#94a3b8;--color-border:#334155;--color-primary:#7c3aed;--color-primary-hover:#8b5cf6;--color-primary-foreground:#f8fafc;--color-primary-ring:#a78bfa;--color-secondary:#0284c7;--color-secondary-hover:#0ea5e9;--color-secondary-foreground:#f8fafc;--color-secondary-ring:#38bdf8;--color-disabled:#475569;--color-disabled-hover:#334155;--color-ring:#64748b;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-info:#22d3ee}:root{--motion-duration-color:.15s}@media (prefers-reduced-motion:reduce){:root{--motion-duration-color:0s}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@juwel-development/design-system",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "type": "module",
5
5
  "description": "Shared design system: tokens and components.",
6
6
  "license": "MIT",
package/src/Interaction/Button/Button.tsx CHANGED
@@ -5,17 +5,19 @@ import type { Subject } from 'rxjs';
5
5
 
6
6
  // No `dark:` classes here by design: every colour below is a semantic token whose value is
7
7
  // re-pointed by the `.dark` class in tokens.css, so one set of classes serves both themes.
8
+ // The colour transition is stated once in the base, on the motion token, so no variant can
9
+ // disagree with it - see docs/adr/0001-motion-token-contract.md.
8
10
  const button = cva(
9
- 'py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover cursor-pointer disabled:cursor-not-allowed select-none text-nowrap inline-flex flex-row items-center justify-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface',
11
+ 'transition-colors duration-[var(--motion-duration-color)] py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover cursor-pointer disabled:cursor-not-allowed select-none text-nowrap inline-flex flex-row items-center justify-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface',
10
12
  {
11
13
  variants: {
12
14
  variant: {
13
15
  primary:
14
- 'px-4 sm:px-6 min-w-42 bg-primary text-primary-foreground rounded-lg transition-all duration-200 hover:bg-primary-hover focus-visible:ring-primary-ring',
16
+ 'px-4 sm:px-6 min-w-42 bg-primary text-primary-foreground rounded-lg hover:bg-primary-hover focus-visible:ring-primary-ring',
15
17
  secondary:
16
- 'px-4 sm:px-6 min-w-42 bg-secondary text-secondary-foreground rounded-lg transition-all duration-200 hover:bg-secondary-hover focus-visible:ring-secondary-ring',
18
+ 'px-4 sm:px-6 min-w-42 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary-hover focus-visible:ring-secondary-ring',
17
19
  ghost:
18
- 'px-2 min-w-0 bg-transparent text-foreground hover:underline transition-all duration-200 focus-visible:ring-ring',
20
+ 'px-2 min-w-0 bg-transparent text-foreground hover:underline focus-visible:ring-ring',
19
21
  },
20
22
  },
21
23
  defaultVariants: {
package/src/Theme/renderTokens.ts CHANGED
@@ -7,6 +7,22 @@ const GENERATED_HEADER = `/* GENERATED from src/Theme/Palette.ts by \`npm run bu
7
7
  * values inside @theme directly would freeze them at build time and the .dark overrides would
8
8
  * never reach the utilities. */`;
9
9
 
10
+ /* The library performs exactly one motion - a colour transition - so its motion contract is this
11
+ single token. 150ms matches Tailwind's default, so it changes nothing visually; its job is to
12
+ have a name a consumer theme and the reduced-motion query can reach.
13
+ See docs/adr/0001-motion-token-contract.md. */
14
+ const MOTION = `:root {
15
+ --motion-duration-color: 150ms;
16
+ }
17
+
18
+ /* Honour prefers-reduced-motion for the one motion the library performs, by re-pointing the token
19
+ to 0ms. Deliberately no blanket transition reset - only what the library performs is zeroed. */
20
+ @media (prefers-reduced-motion: reduce) {
21
+ :root {
22
+ --motion-duration-color: 0ms;
23
+ }
24
+ }`;
25
+
10
26
  const toKebabCase = (name: string): string =>
11
27
  name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
12
28
 
@@ -45,5 +61,8 @@ ${declarations(dark, raw(dark))}
45
61
  @theme inline {
46
62
  ${declarations(light, reference())}
47
63
  }
64
+
65
+ /* Motion is not a colour: it is carried in :root only, never mapped into @theme inline. */
66
+ ${MOTION}
48
67
  `;
49
68
  };
package/src/tokens.css CHANGED
@@ -74,3 +74,16 @@
74
74
  --color-error: var(--color-error);
75
75
  --color-info: var(--color-info);
76
76
  }
77
+
78
+ /* Motion is not a colour: it is carried in :root only, never mapped into @theme inline. */
79
+ :root {
80
+ --motion-duration-color: 150ms;
81
+ }
82
+
83
+ /* Honour prefers-reduced-motion for the one motion the library performs, by re-pointing the token
84
+ to 0ms. Deliberately no blanket transition reset - only what the library performs is zeroed. */
85
+ @media (prefers-reduced-motion: reduce) {
86
+ :root {
87
+ --motion-duration-color: 0ms;
88
+ }
89
+ }