@ds-mo/tokens 0.1.0

package/dist/json/effects.json

@@ -0,0 +1,474 @@
+{
+  "--effect-blur-sm": {
+    "$type": "effect",
+    "$value": "8px"
+  },
+  "--effect-blur-md": {
+    "$type": "effect",
+    "$value": "16px"
+  },
+  "--effect-blur-lg": {
+    "$type": "effect",
+    "$value": "32px"
+  },
+  "--effect-animation-duration-instant": {
+    "$type": "effect",
+    "$value": "0ms"
+  },
+  "--effect-animation-duration-short-1": {
+    "$type": "effect",
+    "$value": "50ms"
+  },
+  "--effect-animation-duration-short-2": {
+    "$type": "effect",
+    "$value": "100ms"
+  },
+  "--effect-animation-duration-short-3": {
+    "$type": "effect",
+    "$value": "200ms"
+  },
+  "--effect-animation-duration-medium-1": {
+    "$type": "effect",
+    "$value": "300ms"
+  },
+  "--effect-animation-duration-medium-2": {
+    "$type": "effect",
+    "$value": "400ms"
+  },
+  "--effect-animation-duration-medium-3": {
+    "$type": "effect",
+    "$value": "500ms"
+  },
+  "--effect-animation-duration-long-1": {
+    "$type": "effect",
+    "$value": "750ms"
+  },
+  "--effect-animation-duration-long-2": {
+    "$type": "effect",
+    "$value": "1000ms"
+  },
+  "--effect-animation-duration-long-3": {
+    "$type": "effect",
+    "$value": "2000ms"
+  },
+  "--effect-animation-delay-instant": {
+    "$type": "effect",
+    "$value": "0ms"
+  },
+  "--effect-animation-delay-short-1": {
+    "$type": "effect",
+    "$value": "200ms"
+  },
+  "--effect-animation-delay-short-2": {
+    "$type": "effect",
+    "$value": "300ms"
+  },
+  "--effect-animation-delay-short-3": {
+    "$type": "effect",
+    "$value": "400ms"
+  },
+  "--effect-animation-delay-medium-1": {
+    "$type": "effect",
+    "$value": "500ms"
+  },
+  "--effect-animation-delay-medium-2": {
+    "$type": "effect",
+    "$value": "750ms"
+  },
+  "--effect-animation-delay-medium-3": {
+    "$type": "effect",
+    "$value": "1000ms"
+  },
+  "--effect-animation-delay-long-1": {
+    "$type": "effect",
+    "$value": "2000ms"
+  },
+  "--effect-animation-delay-long-2": {
+    "$type": "effect",
+    "$value": "4000ms"
+  },
+  "--effect-animation-delay-long-3": {
+    "$type": "effect",
+    "$value": "6000ms"
+  },
+  "--effect-animation-easing-ease-in": {
+    "$type": "effect",
+    "$value": "cubic-bezier(0.47,0,0.75,0.72)"
+  },
+  "--effect-animation-easing-ease-out": {
+    "$type": "effect",
+    "$value": "cubic-bezier(0.17,0.84,0.44,1)"
+  },
+  "--effect-animation-easing-ease-in-out": {
+    "$type": "effect",
+    "$value": "cubic-bezier(0.77,0,0.18,1)"
+  },
+  "--effect-animation-easing-ease-in-out-back": {
+    "$type": "effect",
+    "$value": "cubic-bezier(0.22, 0.61, 0.01, 1.03)"
+  },
+  "--effect-motion-instant": {
+    "$type": "effect",
+    "$value": "var(--effect-animation-duration-instant)  var(--effect-animation-easing-ease-in-out)"
+  },
+  "--effect-motion-short-1": {
+    "$type": "effect",
+    "$value": "var(--effect-animation-duration-short-1)  var(--effect-animation-easing-ease-in-out)"
+  },
+  "--effect-motion-short-2": {
+    "$type": "effect",
+    "$value": "var(--effect-animation-duration-short-2)  var(--effect-animation-easing-ease-in-out)"
+  },
+  "--effect-motion-short-3": {
+    "$type": "effect",
+    "$value": "var(--effect-animation-duration-short-3)  var(--effect-animation-easing-ease-in-out)"
+  },
+  "--effect-motion-medium-1": {
+    "$type": "effect",
+    "$value": "var(--effect-animation-duration-medium-1) var(--effect-animation-easing-ease-in-out)"
+  },
+  "--effect-motion-medium-2": {
+    "$type": "effect",
+    "$value": "var(--effect-animation-duration-medium-2) var(--effect-animation-easing-ease-in-out)"
+  },
+  "--effect-motion-medium-3": {
+    "$type": "effect",
+    "$value": "var(--effect-animation-duration-medium-3) var(--effect-animation-easing-ease-in-out)"
+  },
+  "--effect-motion-long-1": {
+    "$type": "effect",
+    "$value": "var(--effect-animation-duration-long-1)   var(--effect-animation-easing-ease-in-out)"
+  },
+  "--effect-motion-long-2": {
+    "$type": "effect",
+    "$value": "var(--effect-animation-duration-long-2)   var(--effect-animation-easing-ease-in-out)"
+  },
+  "--effect-motion-long-3": {
+    "$type": "effect",
+    "$value": "var(--effect-animation-duration-long-3)   var(--effect-animation-easing-ease-in-out)"
+  },
+  "--effect-transition-interaction-background-instant": {
+    "$type": "effect",
+    "$value": "background-color var(--effect-motion-instant)"
+  },
+  "--effect-transition-interaction-background-short-1": {
+    "$type": "effect",
+    "$value": "background-color var(--effect-motion-short-1)"
+  },
+  "--effect-transition-interaction-background-short-2": {
+    "$type": "effect",
+    "$value": "background-color var(--effect-motion-short-2)"
+  },
+  "--effect-transition-interaction-background-short-3": {
+    "$type": "effect",
+    "$value": "background-color var(--effect-motion-short-3)"
+  },
+  "--effect-transition-interaction-background-medium-1": {
+    "$type": "effect",
+    "$value": "background-color var(--effect-motion-medium-1)"
+  },
+  "--effect-transition-interaction-background-medium-2": {
+    "$type": "effect",
+    "$value": "background-color var(--effect-motion-medium-2)"
+  },
+  "--effect-transition-interaction-background-medium-3": {
+    "$type": "effect",
+    "$value": "background-color var(--effect-motion-medium-3)"
+  },
+  "--effect-transition-interaction-background-long-1": {
+    "$type": "effect",
+    "$value": "background-color var(--effect-motion-long-1)"
+  },
+  "--effect-transition-interaction-background-long-2": {
+    "$type": "effect",
+    "$value": "background-color var(--effect-motion-long-2)"
+  },
+  "--effect-transition-interaction-background-long-3": {
+    "$type": "effect",
+    "$value": "background-color var(--effect-motion-long-3)"
+  },
+  "--effect-transition-interaction-color-instant": {
+    "$type": "effect",
+    "$value": "color var(--effect-motion-instant)"
+  },
+  "--effect-transition-interaction-color-short-1": {
+    "$type": "effect",
+    "$value": "color var(--effect-motion-short-1)"
+  },
+  "--effect-transition-interaction-color-short-2": {
+    "$type": "effect",
+    "$value": "color var(--effect-motion-short-2)"
+  },
+  "--effect-transition-interaction-color-short-3": {
+    "$type": "effect",
+    "$value": "color var(--effect-motion-short-3)"
+  },
+  "--effect-transition-interaction-color-medium-1": {
+    "$type": "effect",
+    "$value": "color var(--effect-motion-medium-1)"
+  },
+  "--effect-transition-interaction-color-medium-2": {
+    "$type": "effect",
+    "$value": "color var(--effect-motion-medium-2)"
+  },
+  "--effect-transition-interaction-color-medium-3": {
+    "$type": "effect",
+    "$value": "color var(--effect-motion-medium-3)"
+  },
+  "--effect-transition-interaction-color-long-1": {
+    "$type": "effect",
+    "$value": "color var(--effect-motion-long-1)"
+  },
+  "--effect-transition-interaction-color-long-2": {
+    "$type": "effect",
+    "$value": "color var(--effect-motion-long-2)"
+  },
+  "--effect-transition-interaction-color-long-3": {
+    "$type": "effect",
+    "$value": "color var(--effect-motion-long-3)"
+  },
+  "--effect-transition-interaction-opacity-instant": {
+    "$type": "effect",
+    "$value": "opacity var(--effect-motion-instant)"
+  },
+  "--effect-transition-interaction-opacity-short-1": {
+    "$type": "effect",
+    "$value": "opacity var(--effect-motion-short-1)"
+  },
+  "--effect-transition-interaction-opacity-short-2": {
+    "$type": "effect",
+    "$value": "opacity var(--effect-motion-short-2)"
+  },
+  "--effect-transition-interaction-opacity-short-3": {
+    "$type": "effect",
+    "$value": "opacity var(--effect-motion-short-3)"
+  },
+  "--effect-transition-interaction-opacity-medium-1": {
+    "$type": "effect",
+    "$value": "opacity var(--effect-motion-medium-1)"
+  },
+  "--effect-transition-interaction-opacity-medium-2": {
+    "$type": "effect",
+    "$value": "opacity var(--effect-motion-medium-2)"
+  },
+  "--effect-transition-interaction-opacity-medium-3": {
+    "$type": "effect",
+    "$value": "opacity var(--effect-motion-medium-3)"
+  },
+  "--effect-transition-interaction-opacity-long-1": {
+    "$type": "effect",
+    "$value": "opacity var(--effect-motion-long-1)"
+  },
+  "--effect-transition-interaction-opacity-long-2": {
+    "$type": "effect",
+    "$value": "opacity var(--effect-motion-long-2)"
+  },
+  "--effect-transition-interaction-opacity-long-3": {
+    "$type": "effect",
+    "$value": "opacity var(--effect-motion-long-3)"
+  },
+  "--effect-transition-interaction-border-color-instant": {
+    "$type": "effect",
+    "$value": "border-color var(--effect-motion-instant)"
+  },
+  "--effect-transition-interaction-border-color-short-1": {
+    "$type": "effect",
+    "$value": "border-color var(--effect-motion-short-1)"
+  },
+  "--effect-transition-interaction-border-color-short-2": {
+    "$type": "effect",
+    "$value": "border-color var(--effect-motion-short-2)"
+  },
+  "--effect-transition-interaction-border-color-short-3": {
+    "$type": "effect",
+    "$value": "border-color var(--effect-motion-short-3)"
+  },
+  "--effect-transition-interaction-border-color-medium-1": {
+    "$type": "effect",
+    "$value": "border-color var(--effect-motion-medium-1)"
+  },
+  "--effect-transition-interaction-border-color-medium-2": {
+    "$type": "effect",
+    "$value": "border-color var(--effect-motion-medium-2)"
+  },
+  "--effect-transition-interaction-border-color-medium-3": {
+    "$type": "effect",
+    "$value": "border-color var(--effect-motion-medium-3)"
+  },
+  "--effect-transition-interaction-border-color-long-1": {
+    "$type": "effect",
+    "$value": "border-color var(--effect-motion-long-1)"
+  },
+  "--effect-transition-interaction-border-color-long-2": {
+    "$type": "effect",
+    "$value": "border-color var(--effect-motion-long-2)"
+  },
+  "--effect-transition-interaction-border-color-long-3": {
+    "$type": "effect",
+    "$value": "border-color var(--effect-motion-long-3)"
+  },
+  "--effect-transition-interaction-transform-instant": {
+    "$type": "effect",
+    "$value": "transform var(--effect-motion-instant)"
+  },
+  "--effect-transition-interaction-transform-short-1": {
+    "$type": "effect",
+    "$value": "transform var(--effect-motion-short-1)"
+  },
+  "--effect-transition-interaction-transform-short-2": {
+    "$type": "effect",
+    "$value": "transform var(--effect-motion-short-2)"
+  },
+  "--effect-transition-interaction-transform-short-3": {
+    "$type": "effect",
+    "$value": "transform var(--effect-motion-short-3)"
+  },
+  "--effect-transition-interaction-transform-medium-1": {
+    "$type": "effect",
+    "$value": "transform var(--effect-motion-medium-1)"
+  },
+  "--effect-transition-interaction-transform-medium-2": {
+    "$type": "effect",
+    "$value": "transform var(--effect-motion-medium-2)"
+  },
+  "--effect-transition-interaction-transform-medium-3": {
+    "$type": "effect",
+    "$value": "transform var(--effect-motion-medium-3)"
+  },
+  "--effect-transition-interaction-transform-long-1": {
+    "$type": "effect",
+    "$value": "transform var(--effect-motion-long-1)"
+  },
+  "--effect-transition-interaction-transform-long-2": {
+    "$type": "effect",
+    "$value": "transform var(--effect-motion-long-2)"
+  },
+  "--effect-transition-interaction-transform-long-3": {
+    "$type": "effect",
+    "$value": "transform var(--effect-motion-long-3)"
+  },
+  "--effect-shadow-elevated-none": {
+    "$type": "effect",
+    "$value": "none"
+  },
+  "--effect-highlight-elevated-none": {
+    "$type": "effect",
+    "$value": "none"
+  },
+  "--effect-elevation-elevated-none": {
+    "$type": "effect",
+    "$value": "none"
+  },
+  "--effect-shadow-elevated-sm": {
+    "$type": "effect",
+    "$value": "0px 2px 4px -2px var(--color-surface-shadow),\n    0px 0px 0px 1px  var(--color-surface-shadow)"
+  },
+  "--effect-highlight-elevated-sm": {
+    "$type": "effect",
+    "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n    inset 0px 0px 0px 1px  var(--color-surface-highlight)"
+  },
+  "--effect-elevation-elevated-sm": {
+    "$type": "effect",
+    "$value": "var(--effect-shadow-elevated-sm),\n    var(--effect-highlight-elevated-sm)"
+  },
+  "--effect-shadow-elevated-md": {
+    "$type": "effect",
+    "$value": "0px 4px 8px -2px var(--color-surface-shadow),\n    0px 0px 0px 1px  var(--color-surface-shadow)"
+  },
+  "--effect-highlight-elevated-md": {
+    "$type": "effect",
+    "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n    inset 0px 0px 0px 1px  var(--color-surface-highlight)"
+  },
+  "--effect-elevation-elevated-md": {
+    "$type": "effect",
+    "$value": "var(--effect-shadow-elevated-md),\n    var(--effect-highlight-elevated-md)"
+  },
+  "--effect-shadow-elevated-floating": {
+    "$type": "effect",
+    "$value": "0px 8px 16px -4px var(--color-surface-shadow),\n    0px 0px 0px 1px   var(--color-surface-shadow)"
+  },
+  "--effect-highlight-elevated-floating": {
+    "$type": "effect",
+    "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n    inset 0px 0px 0px 1px  var(--color-surface-highlight)"
+  },
+  "--effect-elevation-elevated-floating": {
+    "$type": "effect",
+    "$value": "var(--effect-shadow-elevated-floating),\n    var(--effect-highlight-elevated-floating)"
+  },
+  "--effect-shadow-depressed-sm": {
+    "$type": "effect",
+    "$value": "0px -4px 2px -4px var(--color-surface-shadow),\n    0px  4px 2px -4px var(--color-surface-highlight),\n    0px  0px 0px  1px var(--color-surface-highlight)"
+  },
+  "--effect-highlight-depressed-sm": {
+    "$type": "effect",
+    "$value": "inset 0px 2px 4px -2px var(--color-surface-shadow),\n    inset 0px 0px 0px 1px  var(--color-surface-shadow)"
+  },
+  "--effect-elevation-depressed-sm": {
+    "$type": "effect",
+    "$value": "var(--effect-shadow-depressed-sm),\n    var(--effect-highlight-depressed-sm)"
+  },
+  "--effect-shadow-depressed-md": {
+    "$type": "effect",
+    "$value": "0px -4px 2px -4px var(--color-surface-shadow),\n    0px  4px 2px -4px var(--color-surface-highlight),\n    0px  0px 0px  1px var(--color-surface-highlight)"
+  },
+  "--effect-highlight-depressed-md": {
+    "$type": "effect",
+    "$value": "inset 0px 4px 8px -4px var(--color-surface-shadow),\n    inset 0px 0px 0px 1px  var(--color-surface-shadow)"
+  },
+  "--effect-elevation-depressed-md": {
+    "$type": "effect",
+    "$value": "var(--effect-shadow-depressed-md),\n    var(--effect-highlight-depressed-md)"
+  },
+  "--effect-shadow-elevated-panel-top": {
+    "$type": "effect",
+    "$value": "0px 4px 8px 0px var(--color-surface-shadow),\n    0px 0px 0px 1px var(--color-surface-shadow)"
+  },
+  "--effect-highlight-elevated-panel-top": {
+    "$type": "effect",
+    "$value": "inset 0px -4px 2px -4px var(--color-surface-highlight),\n    inset 0px -1px 0px 0px  var(--color-surface-highlight)"
+  },
+  "--effect-elevation-elevated-panel-top": {
+    "$type": "effect",
+    "$value": "var(--effect-shadow-elevated-panel-top),\n    var(--effect-highlight-elevated-panel-top)"
+  },
+  "--effect-shadow-elevated-panel-right": {
+    "$type": "effect",
+    "$value": "-4px 0px 8px -2px var(--color-surface-shadow),\n    0px  0px 0px  1px var(--color-surface-shadow)"
+  },
+  "--effect-highlight-elevated-panel-right": {
+    "$type": "effect",
+    "$value": "inset 4px 0px 2px -4px var(--color-surface-highlight),\n    inset 1px 0px 0px 0px  var(--color-surface-highlight)"
+  },
+  "--effect-elevation-elevated-panel-right": {
+    "$type": "effect",
+    "$value": "var(--effect-shadow-elevated-panel-right),\n    var(--effect-highlight-elevated-panel-right)"
+  },
+  "--effect-shadow-elevated-panel-bottom": {
+    "$type": "effect",
+    "$value": "0px -4px 8px 0px var(--color-surface-shadow),\n    0px  0px 0px 1px var(--color-surface-shadow)"
+  },
+  "--effect-highlight-elevated-panel-bottom": {
+    "$type": "effect",
+    "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n    inset 0px 1px 0px 0px  var(--color-surface-highlight)"
+  },
+  "--effect-elevation-elevated-panel-bottom": {
+    "$type": "effect",
+    "$value": "var(--effect-shadow-elevated-panel-bottom),\n    var(--effect-highlight-elevated-panel-bottom)"
+  },
+  "--effect-shadow-elevated-panel-left": {
+    "$type": "effect",
+    "$value": "4px 0px 8px -2px var(--color-surface-shadow),\n    0px 0px 0px  1px var(--color-surface-shadow)"
+  },
+  "--effect-highlight-elevated-panel-left": {
+    "$type": "effect",
+    "$value": "inset -4px 0px 2px -4px var(--color-surface-highlight),\n    inset -1px 0px 0px 0px  var(--color-surface-highlight)"
+  },
+  "--effect-elevation-elevated-panel-left": {
+    "$type": "effect",
+    "$value": "var(--effect-shadow-elevated-panel-left),\n    var(--effect-highlight-elevated-panel-left)"
+  },
+  "--effect-focus-ring": {
+    "$type": "effect",
+    "$value": "0 0 0 var(--dimension-space-025) transparent,\n    0 0 0 calc(var(--dimension-space-025) + var(--dimension-stroke-width-025)) var(--color-foreground-medium-brand)"
+  }
+}

package/dist/json/typography.json

@@ -0,0 +1,114 @@
+{
+  "--typography-weight-regular": {
+    "$type": "typography",
+    "$value": "400"
+  },
+  "--typography-weight-medium": {
+    "$type": "typography",
+    "$value": "500"
+  },
+  "--typography-weight-semibold": {
+    "$type": "typography",
+    "$value": "600"
+  },
+  "--typography-weight-bold": {
+    "$type": "typography",
+    "$value": "700"
+  },
+  "--typography-fontsize-xs": {
+    "$type": "typography",
+    "$value": "9px"
+  },
+  "--typography-fontsize-sm": {
+    "$type": "typography",
+    "$value": "12px"
+  },
+  "--typography-fontsize-md": {
+    "$type": "typography",
+    "$value": "14px"
+  },
+  "--typography-fontsize-lg": {
+    "$type": "typography",
+    "$value": "18px"
+  },
+  "--typography-fontsize-xl": {
+    "$type": "typography",
+    "$value": "24px"
+  },
+  "--typography-fontsize-2xl": {
+    "$type": "typography",
+    "$value": "32px"
+  },
+  "--typography-fontsize-3xl": {
+    "$type": "typography",
+    "$value": "44px"
+  },
+  "--typography-lineheight-xs": {
+    "$type": "typography",
+    "$value": "12px"
+  },
+  "--typography-lineheight-sm": {
+    "$type": "typography",
+    "$value": "16px"
+  },
+  "--typography-lineheight-md": {
+    "$type": "typography",
+    "$value": "20px"
+  },
+  "--typography-lineheight-lg": {
+    "$type": "typography",
+    "$value": "24px"
+  },
+  "--typography-lineheight-xl": {
+    "$type": "typography",
+    "$value": "32px"
+  },
+  "--typography-lineheight-2xl": {
+    "$type": "typography",
+    "$value": "48px"
+  },
+  "--typography-lineheight-3xl": {
+    "$type": "typography",
+    "$value": "64px"
+  },
+  "--typography-letterspacing-none": {
+    "$type": "typography",
+    "$value": "0px"
+  },
+  "--typography-letterspacing-positive": {
+    "$type": "typography",
+    "$value": "0.3px"
+  },
+  "--typography-letterspacing-negative-half": {
+    "$type": "typography",
+    "$value": "-0.15px"
+  },
+  "--typography-letterspacing-negative": {
+    "$type": "typography",
+    "$value": "-0.3px"
+  },
+  "--typography-letterspacing-negative-double": {
+    "$type": "typography",
+    "$value": "-0.6px"
+  },
+  "--typography-paragraphspacing-none": {
+    "$type": "typography",
+    "$value": "0px"
+  },
+  "--typography-paragraphspacing-sm": {
+    "$type": "typography",
+    "$value": "4px"
+  },
+  "--typography-paragraphspacing-md": {
+    "$type": "typography",
+    "$value": "8px"
+  },
+  "--typography-paragraphspacing-lg": {
+    "$type": "typography",
+    "$value": "12px"
+  },
+  "--typography-font-family": {
+    "$type": "typography",
+    "$value": "'Inter', sans-serif"
+  }
+}

package/dist/reset.css

@@ -0,0 +1,51 @@
+/* CSS Reset */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  line-height: 1.5;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+#root {
+  isolation: isolate;
+  height: 100%;
+  width: 100%;
+}
+

package/dist/themes/dark.css

@@ -0,0 +1,12 @@
+/**
+ * Dark theme
+ *
+ * Dark theme overrides are included in colors.css under :root[data-theme="dark"].
+ * This file exists for documentation and explicit import purposes.
+ *
+ * To activate dark theme, set data-theme="dark" on the <html> element:
+ *   document.documentElement.setAttribute('data-theme', 'dark');
+ */
+:root[data-theme='dark'] {
+  color-scheme: dark;
+}

package/dist/themes/light.css

@@ -0,0 +1,13 @@
+/**
+ * Light theme (default)
+ *
+ * Light theme tokens are included in colors.css by default under :root.
+ * This file exists for explicit theme switching use cases where you want
+ * to force light theme on a specific subtree:
+ *
+ *   <div data-theme="light"> ... </div>
+ */
+:root,
+[data-theme='light'] {
+  color-scheme: light;
+}