@educarehq/solaris-ui 0.3.2 → 0.5.0

package/styles/_popover.scss

@@ -1,73 +1,73 @@
-.solaris-popover-panel-overlay {
-  z-index: var(--solaris-z-index-popover);
-}
-
-.solaris-popover-panel {
-  --solaris-popover-border-width: 0;
-  --solaris-popover-min-width: auto;
-  --solaris-popover-max-width: none;
-  --solaris-popover-border-color: transparent;
-  --solaris-popover-radius: var(--solaris-radius-md);
-  --solaris-popover-shadow: var(--solaris-shadow-lg);
-  --solaris-popover-padding: var(--solaris-spacing-3);
-  --solaris-popover-color: var(--solaris-text-default);
-  --solaris-popover-background: var(--solaris-surface-raised);
-
-  outline: none;
-  display: block;
-}
-
-.solaris-popover-panel__container {
-  outline: none;
-  box-sizing: border-box;
-  color: var(--solaris-popover-color);
-  padding: var(--solaris-popover-padding);
-  box-shadow: var(--solaris-popover-shadow);
-  min-width: var(--solaris-popover-min-width);
-  max-width: var(--solaris-popover-max-width);
-  border-radius: var(--solaris-popover-radius);
-  background: var(--solaris-popover-background);
-  border: var(--solaris-popover-border-width) solid
-    var(--solaris-popover-border-color);
-}
-
-.solaris-popover-panel__container[data-appearance='outline'] {
-  background: var(--solaris-surface-base);
-  border: var(--solaris-border-width-sm) solid var(--solaris-border-subtle);
-}
-
-.solaris-popover-panel__container[data-padding='none'] {
-  --solaris-popover-padding: 0;
-}
-
-.solaris-popover-panel__container[data-padding='sm'] {
-  --solaris-popover-padding: var(--solaris-spacing-2);
-}
-
-.solaris-popover-panel__container[data-padding='md'] {
-  --solaris-popover-padding: var(--solaris-spacing-3);
-}
-
-.solaris-popover-panel__container[data-padding='lg'] {
-  --solaris-popover-padding: var(--solaris-spacing-4);
-}
-
-.solaris-popover-panel__container[data-radius='none'] {
-  border-radius: var(--solaris-radius-none);
-}
-
-.solaris-popover-panel__container[data-radius='sm'] {
-  border-radius: var(--solaris-radius-sm);
-}
-
-.solaris-popover-panel__container[data-radius='md'] {
-  border-radius: var(--solaris-radius-md);
-}
-
-.solaris-popover-panel__container[data-radius='lg'] {
-  border-radius: var(--solaris-radius-lg);
-}
-
-.solaris-popover-panel__container[data-radius='xl'] {
-  border-radius: var(--solaris-radius-xl);
-}
+.solaris-popover-panel-overlay {
+  z-index: var(--solaris-z-index-popover);
+}
+
+.solaris-popover-panel {
+  --solaris-popover-border-width: 0;
+  --solaris-popover-min-width: auto;
+  --solaris-popover-max-width: none;
+  --solaris-popover-border-color: transparent;
+  --solaris-popover-radius: var(--solaris-radius-md);
+  --solaris-popover-shadow: var(--solaris-shadow-lg);
+  --solaris-popover-padding: var(--solaris-spacing-3);
+  --solaris-popover-color: var(--solaris-text-default);
+  --solaris-popover-background: var(--solaris-surface-raised);
+
+  outline: none;
+  display: block;
+}
+
+.solaris-popover-panel__container {
+  outline: none;
+  box-sizing: border-box;
+  color: var(--solaris-popover-color);
+  padding: var(--solaris-popover-padding);
+  box-shadow: var(--solaris-popover-shadow);
+  min-width: var(--solaris-popover-min-width);
+  max-width: var(--solaris-popover-max-width);
+  border-radius: var(--solaris-popover-radius);
+  background: var(--solaris-popover-background);
+  border: var(--solaris-popover-border-width) solid
+    var(--solaris-popover-border-color);
+}
+
+.solaris-popover-panel__container[data-appearance='outline'] {
+  background: var(--solaris-surface-base);
+  border: var(--solaris-border-width-sm) solid var(--solaris-border-subtle);
+}
+
+.solaris-popover-panel__container[data-padding='none'] {
+  --solaris-popover-padding: 0;
+}
+
+.solaris-popover-panel__container[data-padding='sm'] {
+  --solaris-popover-padding: var(--solaris-spacing-2);
+}
+
+.solaris-popover-panel__container[data-padding='md'] {
+  --solaris-popover-padding: var(--solaris-spacing-3);
+}
+
+.solaris-popover-panel__container[data-padding='lg'] {
+  --solaris-popover-padding: var(--solaris-spacing-4);
+}
+
+.solaris-popover-panel__container[data-radius='none'] {
+  border-radius: var(--solaris-radius-none);
+}
+
+.solaris-popover-panel__container[data-radius='sm'] {
+  border-radius: var(--solaris-radius-sm);
+}
+
+.solaris-popover-panel__container[data-radius='md'] {
+  border-radius: var(--solaris-radius-md);
+}
+
+.solaris-popover-panel__container[data-radius='lg'] {
+  border-radius: var(--solaris-radius-lg);
+}
+
+.solaris-popover-panel__container[data-radius='xl'] {
+  border-radius: var(--solaris-radius-xl);
+}

package/styles/_textarea.scss

@@ -0,0 +1,248 @@
+textarea[solaris-textarea] {
+  --solaris-textarea-radius: var(--solaris-radius-sm);
+  --solaris-textarea-color: var(--solaris-text-default);
+  --solaris-textarea-padding-x: var(--solaris-spacing-3);
+  --solaris-textarea-padding-y: var(--solaris-spacing-2);
+  --solaris-textarea-font-size: var(--solaris-font-size-md);
+  --solaris-textarea-background: var(--solaris-surface-base);
+  --solaris-textarea-line-height: var(--solaris-line-height-md);
+  --solaris-textarea-border-color: var(--solaris-border-default);
+  --solaris-textarea-disabled-opacity: var(--solaris-opacity-50);
+  --solaris-textarea-border-width: var(--solaris-border-width-sm);
+  --solaris-textarea-placeholder-color: var(--solaris-text-muted);
+  --solaris-textarea-focus-ring-color: var(--solaris-primary-base);
+  --solaris-textarea-invalid-border-color: var(--solaris-danger-base);
+  --solaris-textarea-readonly-background: var(--solaris-surface-muted);
+  --solaris-textarea-min-height: calc(
+    var(--solaris-spacing-8) + var(--solaris-spacing-1)
+  );
+
+  margin: 0;
+  width: 100%;
+  outline: none;
+  box-sizing: border-box;
+  color: var(--solaris-textarea-color);
+  font-size: var(--solaris-textarea-font-size);
+  border-radius: var(--solaris-textarea-radius);
+  background: var(--solaris-textarea-background);
+  min-height: var(--solaris-textarea-min-height);
+  line-height: var(--solaris-textarea-line-height);
+  font-family: var(--solaris-font-family-sans), system-ui;
+  padding: var(--solaris-textarea-padding-y) var(--solaris-textarea-padding-x);
+  border: var(--solaris-textarea-border-width) solid
+    var(--solaris-textarea-border-color);
+  transition:
+    border-color var(--solaris-motion-duration-fast)
+      var(--solaris-motion-easing-standard),
+    box-shadow var(--solaris-motion-duration-fast)
+      var(--solaris-motion-easing-standard);
+}
+
+textarea[solaris-textarea]::placeholder {
+  opacity: 1;
+  color: var(--solaris-textarea-placeholder-color);
+}
+
+textarea[solaris-textarea]:focus-visible {
+  // SOLARIS_TOKEN_EXCEPTION: Focus ring box-shadow uses CSS var with tokenized color. Hardcoded spread required by design.
+  border-color: var(--solaris-textarea-focus-ring-color);
+  box-shadow: 0 0 0 2px var(--solaris-textarea-focus-ring-color);
+}
+
+textarea[solaris-textarea][data-invalid] {
+  border-color: var(--solaris-textarea-invalid-border-color);
+}
+
+textarea[solaris-textarea][data-invalid]:focus-visible {
+  // SOLARIS_TOKEN_EXCEPTION: Invalid state focus ring box-shadow uses CSS var. Hardcoded spread required by design.
+  border-color: var(--solaris-textarea-invalid-border-color);
+  box-shadow: 0 0 0 2px var(--solaris-textarea-invalid-border-color);
+}
+
+textarea[solaris-textarea]:disabled {
+  cursor: not-allowed;
+  opacity: var(--solaris-textarea-disabled-opacity);
+}
+
+textarea[solaris-textarea][readonly] {
+  cursor: default;
+  background: var(--solaris-textarea-readonly-background);
+}
+
+textarea[solaris-textarea][data-appearance='outline'] {
+  --solaris-textarea-color: var(--solaris-text-default);
+  --solaris-textarea-background: var(--solaris-surface-base);
+  --solaris-textarea-border-color: var(--solaris-border-default);
+  --solaris-textarea-disabled-opacity: var(--solaris-opacity-50);
+  --solaris-textarea-border-width: var(--solaris-border-width-sm);
+  --solaris-textarea-placeholder-color: var(--solaris-text-muted);
+  --solaris-textarea-focus-ring-color: var(--solaris-primary-base);
+  --solaris-textarea-invalid-border-color: var(--solaris-danger-base);
+  --solaris-textarea-readonly-background: var(--solaris-surface-muted);
+}
+
+textarea[solaris-textarea][data-appearance='surface'] {
+  --solaris-textarea-color: var(--solaris-text-default);
+  --solaris-textarea-background: var(--solaris-surface-muted);
+  --solaris-textarea-border-color: var(--solaris-border-subtle);
+  --solaris-textarea-disabled-opacity: var(--solaris-opacity-50);
+  --solaris-textarea-border-width: var(--solaris-border-width-sm);
+  --solaris-textarea-placeholder-color: var(--solaris-text-muted);
+  --solaris-textarea-focus-ring-color: var(--solaris-primary-base);
+  --solaris-textarea-invalid-border-color: var(--solaris-danger-base);
+  --solaris-textarea-readonly-background: var(--solaris-surface-base);
+}
+
+textarea[solaris-textarea][data-appearance='filled'] {
+  --solaris-textarea-border-color: transparent;
+  --solaris-textarea-color: var(--solaris-text-default);
+  --solaris-textarea-background: var(--solaris-surface-muted);
+  --solaris-textarea-disabled-opacity: var(--solaris-opacity-50);
+  --solaris-textarea-placeholder-color: var(--solaris-text-muted);
+  --solaris-textarea-focus-ring-color: var(--solaris-primary-base);
+  --solaris-textarea-invalid-border-color: var(--solaris-danger-base);
+  --solaris-textarea-readonly-background: var(--solaris-surface-base);
+  --solaris-textarea-border-width: 0 0 var(--solaris-border-width-sm) 0;
+}
+
+textarea[solaris-textarea][data-size='sm'] {
+  --solaris-textarea-padding-x: var(--solaris-spacing-2);
+  --solaris-textarea-min-height: var(--solaris-spacing-8);
+  --solaris-textarea-padding-y: var(--solaris-spacing-half);
+  --solaris-textarea-font-size: var(--solaris-font-size-sm);
+  --solaris-textarea-line-height: var(--solaris-line-height-sm);
+}
+
+textarea[solaris-textarea][data-size='md'] {
+  --solaris-textarea-padding-x: var(--solaris-spacing-3);
+  --solaris-textarea-padding-y: var(--solaris-spacing-1);
+  --solaris-textarea-font-size: var(--solaris-font-size-md);
+  --solaris-textarea-line-height: var(--solaris-line-height-md);
+  --solaris-textarea-min-height: calc(
+    var(--solaris-spacing-8) + var(--solaris-spacing-1)
+  );
+}
+
+textarea[solaris-textarea][data-size='lg'] {
+  --solaris-textarea-padding-x: var(--solaris-spacing-4);
+  --solaris-textarea-padding-y: var(--solaris-spacing-1);
+  --solaris-textarea-min-height: var(--solaris-spacing-10);
+  --solaris-textarea-font-size: var(--solaris-font-size-lg);
+  --solaris-textarea-line-height: var(--solaris-line-height-lg);
+}
+
+textarea[solaris-textarea][data-density='compact'] {
+  --solaris-textarea-line-height: var(--solaris-line-height-sm);
+  --solaris-textarea-padding-y: var(--solaris-spacing-half);
+}
+
+textarea[solaris-textarea][data-density='comfortable'] {
+  --solaris-textarea-padding-y: var(--solaris-spacing-1);
+  --solaris-textarea-line-height: var(--solaris-line-height-md);
+}
+
+textarea[solaris-textarea][data-radius='none'] {
+  --solaris-textarea-radius: var(--solaris-radius-none);
+}
+
+textarea[solaris-textarea][data-radius='sm'] {
+  --solaris-textarea-radius: var(--solaris-radius-sm);
+}
+
+textarea[solaris-textarea][data-radius='md'] {
+  --solaris-textarea-radius: var(--solaris-radius-md);
+}
+
+textarea[solaris-textarea][data-radius='lg'] {
+  --solaris-textarea-radius: var(--solaris-radius-lg);
+}
+
+textarea[solaris-textarea][data-resize='none'] {
+  resize: none;
+}
+
+textarea[solaris-textarea][data-resize='vertical'] {
+  resize: vertical;
+}
+
+textarea[solaris-textarea][data-resize='horizontal'] {
+  resize: horizontal;
+}
+
+textarea[solaris-textarea][data-resize='both'] {
+  resize: both;
+}
+
+textarea[solaris-textarea][data-full-width] {
+  width: 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  textarea[solaris-textarea] {
+    transition: none;
+  }
+}
+
+[data-reduced-motion='true'] textarea[solaris-textarea] {
+  transition: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  textarea[solaris-textarea]:autofill,
+  textarea[solaris-textarea]:-webkit-autofill {
+    // SOLARIS_TOKEN_EXCEPTION: WebKit autofill dark mode requires hardcoded box-shadow inset to override browser default.
+    -webkit-text-fill-color: var(--solaris-textarea-color);
+    -webkit-box-shadow: 0 0 0 30px var(--solaris-textarea-background) inset;
+  }
+}
+
+solaris-form-field textarea[solaris-textarea] {
+  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
+  border: none;
+  padding-left: 0;
+  border-radius: 0;
+  padding-right: 0;
+  box-shadow: none;
+  background: transparent;
+}
+
+solaris-form-field textarea[solaris-textarea]:focus-visible {
+  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
+  box-shadow: none;
+  border-color: transparent;
+}
+
+solaris-form-field textarea[solaris-textarea][data-invalid] {
+  border-color: transparent;
+}
+
+solaris-form-field textarea[solaris-textarea][data-invalid]:focus-visible {
+  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
+  box-shadow: none;
+  border-color: transparent;
+}
+
+solaris-form-field textarea[solaris-textarea][disabled] {
+  opacity: var(--solaris-textarea-disabled-opacity);
+}
+
+solaris-form-field textarea[solaris-textarea][readonly] {
+  background: transparent;
+}
+
+solaris-form-field textarea[solaris-textarea][data-density='compact'] {
+  padding-top: var(--solaris-spacing-half);
+  padding-bottom: var(--solaris-spacing-half);
+}
+
+solaris-form-field textarea[solaris-textarea][data-density='comfortable'] {
+  padding-top: var(--solaris-spacing-1);
+  padding-bottom: var(--solaris-spacing-1);
+}
+
+solaris-form-field textarea[solaris-textarea]:autofill,
+solaris-form-field textarea[solaris-textarea]:-webkit-autofill {
+  // SOLARIS_TOKEN_EXCEPTION: WebKit autofill inside form-field requires hardcoded transparent box-shadow inset.
+  -webkit-box-shadow: 0 0 0 30px transparent inset;
+  -webkit-text-fill-color: var(--solaris-textarea-color);
+}

package/styles/_theme.scss

@@ -1,5 +1,5 @@
 /// Solaris UI Theme
-/// Applies token CSS custom properties based on configuration.
+/// Applies design tokens and default configuration to the document root.
 ///
 /// Usage:
 ///   @use '@solaris-ui/angular/styles' as solaris;
@@ -21,6 +21,8 @@
 @use 'token/z-index';
 @use 'token/border';
 @use 'token/opacity';
+@use 'token/focus';
+@use 'token/glass';
 
 $-default-config: (
   color-scheme: system,
@@ -33,6 +35,9 @@ $-default-config: (
   $merged: map.merge($-default-config, $config);
 
   $color-scheme: map.get($merged, color-scheme);
+  $density: map.get($merged, density);
+  $radius: map.get($merged, radius);
+  $motion: map.get($merged, motion);
 
   :root {
     @if $color-scheme == light {
@@ -42,5 +47,34 @@ $-default-config: (
     } @else {
       color-scheme: light dark;
     }
+
+    @if $density == compact {
+      --solaris-density-default: compact;
+    } @else {
+      --solaris-density-default: comfortable;
+    }
+
+    @if $radius ==
+      none or
+      $radius ==
+      sm or
+      $radius ==
+      lg or
+      $radius ==
+      xl or
+      $radius ==
+      full
+    {
+      --solaris-radius-default: var(--solaris-radius-#{$radius});
+    } @else {
+      --solaris-radius-default: var(--solaris-radius-md);
+    }
+
+    @if $motion == reduce {
+      --solaris-motion-duration-fast: 0ms;
+      --solaris-motion-duration-normal: 0ms;
+      --solaris-motion-duration-slow: 0ms;
+      --solaris-motion-duration-slower: 0ms;
+    }
   }
 }

package/styles/_toast.scss

@@ -1,9 +1,9 @@
-.solaris-toast-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: var(--solaris-z-index-toast, 500);
-}
+.solaris-toast-overlay {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  pointer-events: none;
+  z-index: var(--solaris-z-index-toast);
+}

package/styles/_tooltip.scss

@@ -1,3 +1,5 @@
-.solaris-tooltip-panel-overlay {
-  z-index: var(--solaris-tooltip-z-index, var(--solaris-z-index-tooltip));
-}
+.solaris-tooltip-panel-overlay {
+  --solaris-tooltip-z-index: var(--solaris-z-index-dropdown);
+
+  z-index: var(--solaris-tooltip-z-index);
+}

package/styles/token/border/_border.scss

@@ -1,5 +1,6 @@
 :root {
-  --solaris-border-width-sm: 0.1rem;
-  --solaris-border-width-md: 0.2rem;
-  --solaris-border-width-lg: 0.3rem;
+  --solaris-border-width-sm: 1px;
+  --solaris-border-width-md: 2px;
+  --solaris-border-width-lg: 3px;
+  --solaris-border-style-default: solid;
 }

package/styles/token/color/_dark.scss

@@ -4,6 +4,9 @@
   --solaris-surface-subtle: #222324;
   --solaris-surface-muted: #333435;
   --solaris-surface-raised: #202123;
+  --solaris-surface-reverse: #f2f5fb;
+  --solaris-surface-reverse-subtle: #e1e1e1;
+  --solaris-surface-reverse-muted: #d8d8d8;
   --solaris-backdrop: #000000bf;
 
   --solaris-text-strong: #f2f5fb;
@@ -32,7 +35,7 @@
   --solaris-success-surface: #0d2613;
   --solaris-success-border: #1a5e28;
   --solaris-success-text: #a3e0b0;
-  --solaris-success-on-solid: #0d2613;
+  --solaris-success-on-solid: #0e1711;
 
   --solaris-warning-base: #fae022;
   --solaris-warning-hover: #e0c82a;
@@ -40,7 +43,7 @@
   --solaris-warning-surface: #2b2504;
   --solaris-warning-border: #5e5208;
   --solaris-warning-text: #f0e48a;
-  --solaris-warning-on-solid: #17191e;
+  --solaris-warning-on-solid: #2e2a21;
 
   --solaris-danger-base: #f23d45;
   --solaris-danger-hover: #f7535a;

package/styles/token/color/_high-contrast.scss

@@ -5,6 +5,9 @@
   --solaris-surface-subtle: #f0f0f0;
   --solaris-surface-muted: #e0e0e0;
   --solaris-surface-raised: #ffffff;
+  --solaris-surface-reverse: #000000;
+  --solaris-surface-reverse-subtle: #1a1a1a;
+  --solaris-surface-reverse-muted: #333333;
   --solaris-backdrop: #000000e2;
 
   --solaris-text-strong: #000000;
@@ -12,10 +15,12 @@
   --solaris-text-muted: #222222;
   --solaris-text-subtle: #444444;
   --solaris-text-inverse: #ffffff;
+  --solaris-text-glass: #ffffff;
 
   --solaris-border-subtle: #666666;
   --solaris-border-default: #888888;
   --solaris-border-strong: #aaaaaa;
+  --solaris-border-soft: #cccccc;
 
   --solaris-primary-base: #0000cc;
   --solaris-primary-hover: #000099;
@@ -24,4 +29,115 @@
   --solaris-primary-border: #9999ff;
   --solaris-primary-text: #0000aa;
   --solaris-primary-on-solid: #ffffff;
+
+  --solaris-success-base: #006600;
+  --solaris-success-hover: #004d00;
+  --solaris-success-active: #003300;
+  --solaris-success-surface: #e6f2e6;
+  --solaris-success-border: #99cc99;
+  --solaris-success-text: #004d00;
+  --solaris-success-on-solid: #ffffff;
+
+  --solaris-warning-base: #996600;
+  --solaris-warning-hover: #7a5200;
+  --solaris-warning-active: #5c3d00;
+  --solaris-warning-surface: #fff2cc;
+  --solaris-warning-border: #ffd633;
+  --solaris-warning-text: #664400;
+  --solaris-warning-on-solid: #ffffff;
+
+  --solaris-danger-base: #cc0000;
+  --solaris-danger-hover: #990000;
+  --solaris-danger-active: #660000;
+  --solaris-danger-surface: #ffe6e6;
+  --solaris-danger-border: #ff9999;
+  --solaris-danger-text: #990000;
+  --solaris-danger-on-solid: #ffffff;
+
+  --solaris-info-base: #0044cc;
+  --solaris-info-hover: #003399;
+  --solaris-info-active: #002266;
+  --solaris-info-surface: #e6eeff;
+  --solaris-info-border: #99bbff;
+  --solaris-info-text: #003399;
+  --solaris-info-on-solid: #ffffff;
+
+  --solaris-orange-base: #cc6600;
+  --solaris-orange-hover: #995200;
+  --solaris-orange-active: #663d00;
+  --solaris-orange-surface: #fff0e6;
+  --solaris-orange-border: #ffcca8;
+  --solaris-orange-text: #994d00;
+  --solaris-orange-on-solid: #ffffff;
+}
+
+@media (prefers-contrast: high) {
+  :root:not([data-theme]) {
+    --solaris-bg-page: #ffffff;
+    --solaris-surface-base: #ffffff;
+    --solaris-surface-subtle: #f0f0f0;
+    --solaris-surface-muted: #e0e0e0;
+    --solaris-surface-raised: #ffffff;
+    --solaris-backdrop: #000000e2;
+
+    --solaris-text-strong: #000000;
+    --solaris-text-default: #000000;
+    --solaris-text-muted: #222222;
+    --solaris-text-subtle: #444444;
+    --solaris-text-inverse: #ffffff;
+    --solaris-text-glass: #ffffff;
+
+    --solaris-border-subtle: #666666;
+    --solaris-border-default: #888888;
+    --solaris-border-strong: #aaaaaa;
+    --solaris-border-soft: #cccccc;
+
+    --solaris-primary-base: #0000cc;
+    --solaris-primary-hover: #000099;
+    --solaris-primary-active: #000066;
+    --solaris-primary-surface: #e6e6ff;
+    --solaris-primary-border: #9999ff;
+    --solaris-primary-text: #0000aa;
+    --solaris-primary-on-solid: #ffffff;
+
+    --solaris-success-base: #006600;
+    --solaris-success-hover: #004d00;
+    --solaris-success-active: #003300;
+    --solaris-success-surface: #e6f2e6;
+    --solaris-success-border: #99cc99;
+    --solaris-success-text: #004d00;
+    --solaris-success-on-solid: #ffffff;
+
+    --solaris-warning-base: #996600;
+    --solaris-warning-hover: #7a5200;
+    --solaris-warning-active: #5c3d00;
+    --solaris-warning-surface: #fff2cc;
+    --solaris-warning-border: #ffd633;
+    --solaris-warning-text: #664400;
+    --solaris-warning-on-solid: #ffffff;
+
+    --solaris-danger-base: #cc0000;
+    --solaris-danger-hover: #990000;
+    --solaris-danger-active: #660000;
+    --solaris-danger-surface: #ffe6e6;
+    --solaris-danger-border: #ff9999;
+    --solaris-danger-text: #990000;
+    --solaris-danger-on-solid: #ffffff;
+
+    --solaris-info-base: #0044cc;
+    --solaris-info-hover: #003399;
+    --solaris-info-active: #002266;
+    --solaris-info-surface: #e6eeff;
+    --solaris-info-border: #99bbff;
+    --solaris-info-text: #003399;
+    --solaris-info-on-solid: #ffffff;
+
+    --solaris-orange-base: #cc6600;
+    --solaris-orange-hover: #995200;
+    --solaris-orange-active: #663d00;
+    --solaris-orange-surface: #fff0e6;
+    --solaris-orange-border: #ffcca8;
+    --solaris-orange-text: #994d00;
+    --solaris-orange-on-solid: #ffffff;
+  }
 }

package/styles/token/color/_light.scss

@@ -5,6 +5,9 @@
   --solaris-surface-subtle: #f7f8fb;
   --solaris-surface-muted: #eeeeee;
   --solaris-surface-raised: #ffffff;
+  --solaris-surface-reverse: #16191e;
+  --solaris-surface-reverse-subtle: #222324;
+  --solaris-surface-reverse-muted: #333435;
   --solaris-backdrop: #000000bf;
 
   --solaris-text-strong: #16191e;