@educarehq/solaris-ui 0.3.3 → 0.5.0

package/styles/token/density/_comfortable.scss

@@ -1,15 +1,15 @@
-[data-density='comfortable'] {
-  --solaris-density-scale: 1;
-  --solaris-density-padding-xs: 0.5rem;
-  --solaris-density-padding-sm: 0.75rem;
-  --solaris-density-padding-md: 1rem;
-  --solaris-density-padding-lg: 1.5rem;
-  --solaris-density-padding-xl: 2rem;
-  --solaris-density-gap-xs: 0.25rem;
-  --solaris-density-gap-sm: 0.5rem;
-  --solaris-density-gap-md: 0.75rem;
-  --solaris-density-gap-lg: 1rem;
-  --solaris-density-gap-xl: 1.5rem;
-  --solaris-density-min-height: 5rem;
-  --solaris-density-min-width: 5rem;
-}
+[data-density='comfortable'] {
+  --solaris-density-scale: 1;
+  --solaris-density-padding-xs: 0.375rem;
+  --solaris-density-padding-sm: 0.5rem;
+  --solaris-density-padding-md: 0.625rem;
+  --solaris-density-padding-lg: 1rem;
+  --solaris-density-padding-xl: 1.25rem;
+  --solaris-density-gap-xs: 0.25rem;
+  --solaris-density-gap-sm: 0.375rem;
+  --solaris-density-gap-md: 0.5rem;
+  --solaris-density-gap-lg: 0.625rem;
+  --solaris-density-gap-xl: 1rem;
+  --solaris-density-min-height: 3.5rem;
+  --solaris-density-min-width: 3.5rem;
+}

package/styles/token/density/_compact.scss

@@ -1,15 +1,15 @@
-[data-density='compact'] {
-  --solaris-density-scale: 0.75;
-  --solaris-density-padding-xs: 0.125rem;
-  --solaris-density-padding-sm: 0.375rem;
-  --solaris-density-padding-md: 0.5rem;
-  --solaris-density-padding-lg: 1rem;
-  --solaris-density-padding-xl: 1.25rem;
-  --solaris-density-gap-xs: 0.5rem;
-  --solaris-density-gap-sm: 0.75rem;
-  --solaris-density-gap-md: 1rem;
-  --solaris-density-gap-lg: 1.25rem;
-  --solaris-density-gap-xl: 1.5rem;
-  --solaris-density-min-height: 3.5rem;
-  --solaris-density-min-width: 3.5rem;
-}
+[data-density='compact'] {
+  --solaris-density-scale: 0.75;
+  --solaris-density-padding-xs: 0.125rem;
+  --solaris-density-padding-sm: 0.25rem;
+  --solaris-density-padding-md: 0.375rem;
+  --solaris-density-padding-lg: 0.5rem;
+  --solaris-density-padding-xl: 0.75rem;
+  --solaris-density-gap-xs: 0.125rem;
+  --solaris-density-gap-sm: 0.25rem;
+  --solaris-density-gap-md: 0.375rem;
+  --solaris-density-gap-lg: 0.5rem;
+  --solaris-density-gap-xl: 0.625rem;
+  --solaris-density-min-height: 2.75rem;
+  --solaris-density-min-width: 2.75rem;
+}

package/styles/token/density/_index.scss

@@ -1,2 +1,2 @@
-@forward 'compact';
-@forward 'comfortable';
+@forward 'compact';
+@forward 'comfortable';

package/styles/token/focus/_focus.scss

@@ -0,0 +1,16 @@
+:root {
+  --solaris-focus-ring-width: 2px;
+  --solaris-focus-ring-offset: 2px;
+  --solaris-focus-ring-color: var(--solaris-primary-base);
+  --solaris-focus-ring-style: solid;
+}
+
+[data-theme='dark'] {
+  --solaris-focus-ring-color: var(--solaris-primary-hover);
+}
+
+[data-theme='high-contrast'] {
+  --solaris-focus-ring-width: 3px;
+  --solaris-focus-ring-offset: 2px;
+  --solaris-focus-ring-color: #000000;
+}

package/styles/token/focus/_index.scss

@@ -0,0 +1 @@
+@forward 'focus';

package/styles/token/glass/_glass.scss

@@ -0,0 +1,17 @@
+:root {
+  --solaris-glass-blur: 22px;
+  --solaris-glass-backdrop-filter: blur(22px) saturate(150%) contrast(108%);
+  --solaris-glass-texture-opacity: 0.18;
+  --solaris-glass-border-color: rgb(255 255 255 / 22%);
+  --solaris-glass-shadow:
+    0 24px 80px rgb(0 0 0 / 38%), inset 0 1px 0 rgb(255 255 255 / 28%),
+    inset 0 -1px 0 rgb(255 255 255 / 6%);
+  --solaris-glass-background:
+    linear-gradient(
+      135deg,
+      rgb(255 255 255 / 24%) 0%,
+      rgb(255 255 255 / 10%) 34%,
+      rgb(255 255 255 / 4%) 100%
+    ),
+    rgb(24 20 18 / 34%);
+}

package/styles/token/glass/_index.scss

@@ -0,0 +1 @@
+@forward 'glass';

package/styles/token/motion/_index.scss

@@ -1,2 +1,2 @@
-@forward 'motion';
-@forward 'reduced-motion';
+@forward 'motion';
+@forward 'reduced-motion';

package/styles/token/motion/_motion.scss

@@ -1,15 +1,16 @@
-:root {
-  --solaris-motion-duration-instant: 0ms;
-  --solaris-motion-duration-fast: 150ms;
-  --solaris-motion-duration-normal: 300ms;
-  --solaris-motion-duration-slow: 600ms;
-  --solaris-motion-duration-slower: 1200ms;
-
-  --solaris-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
-  --solaris-motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
-  --solaris-motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
-  --solaris-motion-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-
-  --solaris-motion-scale-active: 0.97;
-  --solaris-motion-scale-enter: 0.95;
-}
+:root {
+  --solaris-motion-duration-instant: 0ms;
+  --solaris-motion-duration-fast: 150ms;
+  --solaris-motion-duration-normal: 300ms;
+  --solaris-motion-duration-slow: 600ms;
+  --solaris-motion-duration-slower: 1200ms;
+
+  --solaris-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --solaris-motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --solaris-motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --solaris-motion-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --solaris-motion-easing-linear: linear;
+
+  --solaris-motion-scale-active: 0.97;
+  --solaris-motion-scale-enter: 0.95;
+}

package/styles/token/motion/_reduced-motion.scss

@@ -1,15 +1,15 @@
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --solaris-motion-duration-fast: 0ms;
-    --solaris-motion-duration-normal: 0ms;
-    --solaris-motion-duration-slow: 0ms;
-    --solaris-motion-duration-slower: 0ms;
-  }
-}
-
-[data-reduced-motion='true'] {
-  --solaris-motion-duration-fast: 0ms;
-  --solaris-motion-duration-normal: 0ms;
-  --solaris-motion-duration-slow: 0ms;
-  --solaris-motion-duration-slower: 0ms;
-}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --solaris-motion-duration-fast: 0ms;
+    --solaris-motion-duration-normal: 0ms;
+    --solaris-motion-duration-slow: 0ms;
+    --solaris-motion-duration-slower: 0ms;
+  }
+}
+
+[data-reduced-motion='true'] {
+  --solaris-motion-duration-fast: 0ms;
+  --solaris-motion-duration-normal: 0ms;
+  --solaris-motion-duration-slow: 0ms;
+  --solaris-motion-duration-slower: 0ms;
+}

package/styles/token/opacity/_index.scss

@@ -1 +1 @@
-@forward 'opacity';
+@forward 'opacity';

package/styles/token/opacity/_opacity.scss

@@ -1,4 +1,13 @@
-:root {
-  --solaris-opacity-50: 0.5;
-  --solaris-opacity-100: 1;
-}
+:root {
+  --solaris-opacity-0: 0;
+  --solaris-opacity-10: 0.1;
+  --solaris-opacity-20: 0.2;
+  --solaris-opacity-30: 0.3;
+  --solaris-opacity-40: 0.4;
+  --solaris-opacity-50: 0.5;
+  --solaris-opacity-60: 0.6;
+  --solaris-opacity-70: 0.7;
+  --solaris-opacity-80: 0.8;
+  --solaris-opacity-90: 0.9;
+  --solaris-opacity-100: 1;
+}

package/styles/token/radius/_index.scss

@@ -1 +1 @@
-@forward 'radius';
+@forward 'radius';

package/styles/token/radius/_radius.scss

@@ -1,8 +1,8 @@
-:root {
-  --solaris-radius-none: 0;
-  --solaris-radius-sm: 0.2rem;
-  --solaris-radius-md: 0.4rem;
-  --solaris-radius-lg: 0.8rem;
-  --solaris-radius-xl: 1.2rem;
-  --solaris-radius-full: 9999rem;
-}
+:root {
+  --solaris-radius-none: 0;
+  --solaris-radius-sm: 0.125rem;
+  --solaris-radius-md: 0.25rem;
+  --solaris-radius-lg: 0.5rem;
+  --solaris-radius-xl: 0.75rem;
+  --solaris-radius-full: 9999rem;
+}

package/styles/token/shadow/_index.scss

@@ -1 +1 @@
-@forward 'shadow';
+@forward 'shadow';

package/styles/token/shadow/_shadow.scss

@@ -1,26 +1,40 @@
-:root {
-  --solaris-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --solaris-shadow-sm:
-    0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
-  --solaris-shadow-md:
-    0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
-  --solaris-shadow-lg:
-    0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
-  --solaris-shadow-xl:
-    0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
-  --solaris-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
-}
-
-[data-theme='dark'],
-[data-theme='high-contrast'] {
-  --solaris-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --solaris-shadow-sm:
-    0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
-  --solaris-shadow-md:
-    0 4px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
-  --solaris-shadow-lg:
-    0 10px 15px rgba(0, 0, 0, 0.35), 0 4px 6px rgba(0, 0, 0, 0.25);
-  --solaris-shadow-xl:
-    0 20px 25px rgba(0, 0, 0, 0.4), 0 8px 10px rgba(0, 0, 0, 0.25);
-  --solaris-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.5);
-}
+:root {
+  --solaris-shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);
+  --solaris-shadow-sm: 0 1px 3px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%);
+  --solaris-shadow-md: 0 4px 6px rgb(0 0 0 / 6%), 0 2px 4px rgb(0 0 0 / 4%);
+  --solaris-shadow-lg: 0 10px 15px rgb(0 0 0 / 8%), 0 4px 6px rgb(0 0 0 / 4%);
+  --solaris-shadow-xl: 0 20px 25px rgb(0 0 0 / 10%), 0 8px 10px rgb(0 0 0 / 4%);
+  --solaris-shadow-2xl: 0 25px 50px rgb(0 0 0 / 15%);
+}
+
+[data-theme='dark'] {
+  --solaris-shadow-xs: 0 1px 2px rgb(0 0 0 / 30%);
+  --solaris-shadow-sm: 0 1px 3px rgb(0 0 0 / 35%), 0 1px 2px rgb(0 0 0 / 25%);
+  --solaris-shadow-md: 0 4px 6px rgb(0 0 0 / 35%), 0 2px 4px rgb(0 0 0 / 25%);
+  --solaris-shadow-lg: 0 10px 15px rgb(0 0 0 / 35%), 0 4px 6px rgb(0 0 0 / 25%);
+  --solaris-shadow-xl:
+    0 20px 25px rgb(0 0 0 / 40%), 0 8px 10px rgb(0 0 0 / 25%);
+  --solaris-shadow-2xl: 0 25px 50px rgb(0 0 0 / 50%);
+}
+
+[data-theme='high-contrast'] {
+  --solaris-shadow-xs: 0 1px 2px rgb(0 0 0 / 50%);
+  --solaris-shadow-sm: 0 1px 3px rgb(0 0 0 / 50%);
+  --solaris-shadow-md: 0 4px 6px rgb(0 0 0 / 50%);
+  --solaris-shadow-lg: 0 10px 15px rgb(0 0 0 / 50%);
+  --solaris-shadow-xl: 0 20px 25px rgb(0 0 0 / 50%);
+  --solaris-shadow-2xl: 0 25px 50px rgb(0 0 0 / 50%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --solaris-shadow-xs: 0 1px 2px rgb(0 0 0 / 30%);
+    --solaris-shadow-sm: 0 1px 3px rgb(0 0 0 / 35%), 0 1px 2px rgb(0 0 0 / 25%);
+    --solaris-shadow-md: 0 4px 6px rgb(0 0 0 / 35%), 0 2px 4px rgb(0 0 0 / 25%);
+    --solaris-shadow-lg:
+      0 10px 15px rgb(0 0 0 / 35%), 0 4px 6px rgb(0 0 0 / 25%);
+    --solaris-shadow-xl:
+      0 20px 25px rgb(0 0 0 / 40%), 0 8px 10px rgb(0 0 0 / 25%);
+    --solaris-shadow-2xl: 0 25px 50px rgb(0 0 0 / 50%);
+  }
+}

package/styles/token/spacing/_index.scss

@@ -1 +1 @@
-@forward 'spacing';
+@forward 'spacing';

package/styles/token/spacing/_spacing.scss

@@ -1,15 +1,18 @@
-:root {
-  --solaris-spacing-0: 0;
-  --solaris-spacing-1: 0.4rem;
-  --solaris-spacing-2: 0.8rem;
-  --solaris-spacing-3: 1.2rem;
-  --solaris-spacing-4: 1.6rem;
-  --solaris-spacing-5: 2rem;
-  --solaris-spacing-6: 2.4rem;
-  --solaris-spacing-8: 3.2rem;
-  --solaris-spacing-10: 4rem;
-  --solaris-spacing-12: 4.8rem;
-  --solaris-spacing-16: 6.4rem;
-  --solaris-spacing-20: 8rem;
-  --solaris-spacing-24: 9.6rem;
-}
+:root {
+  --solaris-spacing-0: 0;
+  --solaris-spacing-quarter: 0.0625rem;
+  --solaris-spacing-half: 0.125rem;
+  --solaris-spacing-1: 0.25rem;
+  --solaris-spacing-2: 0.5rem;
+  --solaris-spacing-3: 0.75rem;
+  --solaris-spacing-4: 1rem;
+  --solaris-spacing-5: 1.25rem;
+  --solaris-spacing-6: 1.5rem;
+  --solaris-spacing-8: 2rem;
+  --solaris-spacing-9: 2.25rem;
+  --solaris-spacing-10: 2.5rem;
+  --solaris-spacing-12: 3rem;
+  --solaris-spacing-16: 4rem;
+  --solaris-spacing-20: 5rem;
+  --solaris-spacing-24: 6rem;
+}

package/styles/token/typography/_font-family.scss

@@ -1,13 +1,13 @@
-:root {
-  --solaris-font-family-sans:
-    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', sans-serif;
-  --solaris-font-family-mono:
-    'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
-    monospace;
-  --solaris-font-family-display:
-    'Space Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;
-  --solaris-font-family-serif:
-    'IBM Plex Serif', ui-serif, Georgia, Cambria, 'Times New Roman', Times,
-    serif;
-}
+:root {
+  --solaris-font-family-sans:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', sans-serif;
+  --solaris-font-family-mono:
+    'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
+    monospace;
+  --solaris-font-family-display:
+    'Space Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;
+  --solaris-font-family-serif:
+    'IBM Plex Serif', ui-serif, Georgia, Cambria, 'Times New Roman', Times,
+    serif;
+}

package/styles/token/typography/_index.scss

@@ -1,2 +1,2 @@
-@forward 'font-family';
-@forward 'typography';
+@forward 'font-family';
+@forward 'typography';

package/styles/token/typography/_typography.scss

@@ -1,25 +1,26 @@
-:root {
-  --solaris-font-size-2xs: 0.8rem;
-  --solaris-font-size-xs: 1.2rem;
-  --solaris-font-size-sm: 1.4rem;
-  --solaris-font-size-md: 1.6rem;
-  --solaris-font-size-lg: 1.8rem;
-  --solaris-font-size-xl: 2rem;
-  --solaris-font-size-2xl: 2.4rem;
-  --solaris-font-size-3xl: 3rem;
-  --solaris-font-size-4xl: 3.6rem;
-
-  --solaris-font-weight-regular: 400;
-  --solaris-font-weight-medium: 500;
-  --solaris-font-weight-semibold: 600;
-  --solaris-font-weight-bold: 700;
-
-  --solaris-line-height-xs: 1.15;
-  --solaris-line-height-sm: 1.25;
-  --solaris-line-height-md: 1.4;
-  --solaris-line-height-lg: 1.6;
-
-  --solaris-letter-spacing-tight: -0.01em;
-  --solaris-letter-spacing-normal: 0;
-  --solaris-letter-spacing-wide: 0.02em;
-}
+:root {
+  --solaris-font-size-2xs: 0.5rem;
+  --solaris-font-size-xs: 0.75rem;
+  --solaris-font-size-sm: 0.875rem;
+  --solaris-font-size-md: 1rem;
+  --solaris-font-size-lg: 1.125rem;
+  --solaris-font-size-xl: 1.25rem;
+  --solaris-font-size-2xl: 1.5rem;
+  --solaris-font-size-3xl: 1.875rem;
+  --solaris-font-size-4xl: 2.25rem;
+
+  --solaris-font-weight-regular: 400;
+  --solaris-font-weight-medium: 500;
+  --solaris-font-weight-semibold: 600;
+  --solaris-font-weight-bold: 700;
+
+  --solaris-line-height-none: 1;
+  --solaris-line-height-xs: 1.15;
+  --solaris-line-height-sm: 1.25;
+  --solaris-line-height-md: 1.4;
+  --solaris-line-height-lg: 1.6;
+
+  --solaris-letter-spacing-tight: -0.01em;
+  --solaris-letter-spacing-normal: 0;
+  --solaris-letter-spacing-wide: 0.02em;
+}

package/styles/token/z-index/_index.scss

@@ -1 +1 @@
-@forward 'z-index';
+@forward 'z-index';

package/styles/token/z-index/_z-index.scss

@@ -1,10 +1,13 @@
-:root {
-  --solaris-z-index-base: 0;
-  --solaris-z-index-dropdown: 100;
-  --solaris-z-index-sticky: 200;
-  --solaris-z-index-overlay: 300;
-  --solaris-z-index-modal: 400;
-  --solaris-z-index-toast: 500;
-  --solaris-z-index-tooltip: 600;
-  --solaris-z-index-popover: 1000;
-}
+:root {
+  --solaris-z-index-decorative: -1;
+  --solaris-z-index-base: 0;
+  --solaris-z-index-content: 1;
+  --solaris-z-index-raised: 10;
+  --solaris-z-index-dropdown: 100;
+  --solaris-z-index-sticky: 200;
+  --solaris-z-index-overlay: 300;
+  --solaris-z-index-modal: 400;
+  --solaris-z-index-toast: 500;
+  --solaris-z-index-tooltip: 600;
+  --solaris-z-index-popover: 1000;
+}