@1001-digital/styles 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/styles",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "main": "./src/index.css",
   "style": "./src/index.css",

package/src/base/forms.css

@@ -81,7 +81,9 @@ select:not(.unstyled) {
   background-size:
     var(--size-4),
     100% 100%;
-  padding-inline-end: calc(var(--ui-padding-inline) + var(--size-4) + var(--ui-padding-inline) / 2) !important;
+  padding-inline-end: calc(
+    var(--ui-padding-inline) + var(--size-4) + var(--ui-padding-inline) / 2
+  ) !important;
 
   &:is(:hover, :active, :focus, .active) {
     --select-bg: var(--button-background-highlight);

package/src/base/scroll.css

@@ -0,0 +1,4 @@
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--gray-z-2) transparent;
+}

package/src/index.css

@@ -20,6 +20,7 @@
  */
 @import './base/base.css' layer(base);
 @import './base/forms.css' layer(base);
+@import './base/scroll.css' layer(base);
 
 /*
  * Utilities Layer - Helper classes

package/src/variables/components/button.css

@@ -18,7 +18,7 @@
 
   /* Tertiary Button Styles */
   --button-tertiary-background: transparent;
-  --button-tertiary-border-color: var(--gray-z-3);
+  --button-tertiary-border-color: var(--border-color);
   --button-tertiary-color: var(--muted);
   --button-tertiary-background-highlight: var(--gray-z-1);
   --button-tertiary-border-color-highlight: var(--gray-z-4);

package/src/variables/components/calendar.css

@@ -0,0 +1,9 @@
+:root {
+  --calendar-cell-size: var(--size-8);
+  --calendar-cell-border-radius: var(--border-radius);
+  --calendar-selected-background: var(--primary);
+  --calendar-selected-color: var(--background);
+  --calendar-today-border: 1px solid var(--primary);
+  --calendar-hover-background: var(--gray-z-2);
+  --calendar-nav-size: var(--size-6);
+}

package/src/variables/components/combobox.css

@@ -0,0 +1,6 @@
+:root {
+  --combobox-background: var(--background);
+  --combobox-border: var(--border);
+  --combobox-border-radius: var(--border-radius);
+  --combobox-padding: var(--size-1);
+}

package/src/variables/components/date-field.css

@@ -0,0 +1,7 @@
+:root {
+  --date-field-background: var(--background);
+  --date-field-segment-focus-background: var(--primary);
+  --date-field-segment-focus-color: var(--background);
+  --date-field-segment-padding: var(--size-0) var(--size-1);
+  --date-field-segment-border-radius: calc(var(--border-radius) / 2);
+}

package/src/variables/components/date-picker.css

@@ -0,0 +1,6 @@
+:root {
+  --date-picker-content-background: var(--popover-background);
+  --date-picker-content-border: var(--popover-border);
+  --date-picker-content-border-radius: var(--popover-border-radius);
+  --date-picker-trigger-icon-color: var(--muted);
+}

package/src/variables/components/index.css

@@ -8,3 +8,11 @@
 @import './popover.css';
 @import './toast.css';
 @import './tooltip.css';
+@import './pin-input.css';
+@import './progress.css';
+@import './switch.css';
+@import './slider.css';
+@import './calendar.css';
+@import './combobox.css';
+@import './date-field.css';
+@import './date-picker.css';

package/src/variables/components/pin-input.css

@@ -0,0 +1,11 @@
+:root {
+  --pin-input-size: var(--form-item-height);
+  --pin-input-gap: var(--spacer-sm);
+  --pin-input-border-radius: var(--border-radius);
+  --pin-input-background: var(--button-background);
+  --pin-input-background-focus: var(--button-background-highlight);
+  --pin-input-color: var(--color);
+  --pin-input-font-size: var(--ui-font-size);
+  --pin-input-font-weight: var(--ui-font-weight);
+  --pin-input-complete-border-color: var(--primary);
+}

package/src/variables/components/progress.css

@@ -0,0 +1,6 @@
+:root {
+  --progress-height: var(--size-1);
+  --progress-radius: var(--size-4);
+  --progress-track-background: var(--gray-z-2);
+  --progress-indicator-background: var(--primary);
+}

package/src/variables/components/slider.css

@@ -0,0 +1,9 @@
+:root {
+  --slider-track-size: var(--size-1);
+  --slider-track-radius: var(--size-4);
+  --slider-track-background: var(--gray-z-2);
+  --slider-range-background: var(--primary);
+  --slider-thumb-size: var(--size-4);
+  --slider-thumb-radius: var(--size-4);
+  --slider-thumb-background: var(--background);
+}

package/src/variables/components/switch.css

@@ -0,0 +1,10 @@
+:root {
+  --switch-width: calc(var(--size-7) - var(--size-1));
+  --switch-height: var(--size-4);
+  --switch-border-radius: var(--size-4);
+  --switch-background: var(--gray-z-2);
+  --switch-background-checked: var(--primary);
+  --switch-thumb-size: calc(var(--size-4) - var(--size-0) * 2);
+  --switch-thumb-offset: var(--size-0);
+  --switch-thumb-background: var(--background);
+}