@teseor/css 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teseor/css",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "CSS library - reset, primitives, components, utilities",
   "license": "MIT",
   "author": "letanure",

package/src/components/content/divider/docs.html

@@ -4,6 +4,9 @@ description: Visual separator between content sections. Supports horizontal/vert
 ---
 
 <!-- @default -->
+<hr class="ui-divider">
+
+<!-- @semantic_div -->
 <div class="ui-divider" role="separator"></div>
 
 <!-- @with_label -->

package/src/components/content/divider/index.scss

@@ -10,9 +10,9 @@
     // @desc Text color
     --_color: var(--ui-divider-color, var(--ui-color-border, #{t.$color-border}));
     // @desc Line size
-    --_line-size: var(--ui-divider-line-size, #{t.$border-width-sm});
+    --_line-size: var(--ui-divider-line-size, var(--ui-border-width-sm, #{t.$border-width-sm}));
     // @desc Overall height
-    --_height: var(--ui-divider-height, #{t.$unit});
+    --_height: var(--ui-divider-height, var(--ui-unit, #{t.$unit}));
     // @desc Gap between children
     --_gap: var(--ui-divider-gap, calc(#{t.$unit} * 2));
   }
@@ -34,6 +34,9 @@
     font-size: var(--_font-size-sm);
     line-height: 1;
     color: var(--_color-text-muted);
+
+    // Reset <hr> defaults so it works as semantic separator
+    border: none;
   }
 
   // Horizontal line (default)
@@ -76,7 +79,7 @@
     flex: 1;
 
     block-size: auto;
-    inline-size: var(--_size);
+    inline-size: var(--_line-size);
   }
 
   // @modifier align

package/src/components/disclosure/accordion/index.scss

@@ -10,7 +10,7 @@
     // @desc Border color
     --_border-color: var(--ui-accordion-border-color, var(--ui-color-border, #{t.$color-border}));
     // @desc Border thickness
-    --_border-width: var(--ui-accordion-border-width, #{t.$border-width-sm});
+    --_border-width: var(--ui-accordion-border-width, var(--ui-border-width-sm, #{t.$border-width-sm}));
     // @desc Corner radius
     --_radius: var(--ui-accordion-radius, var(--ui-radius-md, calc(#{t.$unit} * 1)));
   }

package/src/components/disclosure/disclosure/index.scss

@@ -15,7 +15,7 @@
     // @desc Border color
     --_border-color: var(--ui-disclosure-border-color, var(--ui-color-border, #{t.$color-border}));
     // @desc Border thickness
-    --_border-width: var(--ui-disclosure-border-width, #{t.$border-width-sm});
+    --_border-width: var(--ui-disclosure-border-width, var(--ui-border-width-sm, #{t.$border-width-sm}));
     // @desc Corner radius
     --_radius: var(--ui-disclosure-radius, var(--ui-radius-md, calc(#{t.$unit} * 1)));
     // @desc Trigger overall height

package/src/components/feedback/progress/index.scss

@@ -21,7 +21,7 @@
     // @desc Overall height
     --_height: var(--ui-progress-height, calc(#{t.$unit} * 1));
     // @desc Background color
-    --_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, #{t.$overlay-bg-subtle}));
+    --_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
     // @desc Fill
     --_fill: var(--ui-progress-fill, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Corner radius

package/src/components/feedback/skeleton/index.scss

@@ -8,7 +8,7 @@
 @layer components.tokens {
   .skeleton {
     // @desc Background color
-    --_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, #{t.$overlay-bg-subtle}));
+    --_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
     // @desc Shimmer
     --_shimmer: var(--ui-skeleton-shimmer, #{t.$skeleton-shimmer});
     // @desc Corner radius

package/src/components/forms/slider/index.scss

@@ -12,9 +12,9 @@
     // @desc Overall height
     --_height: var(--ui-slider-height, var(--ui-row-2, #{t.$row-2}));
     // @desc Track height
-    --_track-height: var(--ui-slider-track-height, #{t.$unit});
+    --_track-height: var(--ui-slider-track-height, var(--ui-unit, #{t.$unit}));
     // @desc Track background
-    --_track-bg: var(--ui-slider-track-bg, var(--ui-color-bg-subtle, #{t.$overlay-bg-subtle}));
+    --_track-bg: var(--ui-slider-track-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
     // @desc Track fill
     --_track-fill: var(--ui-slider-track-fill, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Track corner radius

package/src/components/forms/toggle/index.scss

@@ -14,7 +14,7 @@
     // @desc Track height
     --_track-height: var(--ui-toggle-track-height, calc(#{t.$unit} * 3));
     // @desc Track background
-    --_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, #{t.$overlay-bg-subtle}));
+    --_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
     // @desc Track bg checked
     --_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Track corner radius

package/src/components/navigation/dropdown-menu/index.scss

@@ -10,7 +10,7 @@
     --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
     --_ease-default: var(--ui-ease-default, #{t.$ease-default});
     // @desc Z-index stacking order
-    --_z: var(--ui-dropdown-menu-z, #{t.$z-index-dropdown});
+    --_z: var(--ui-dropdown-menu-z, var(--ui-z-index-dropdown, #{t.$z-index-dropdown}));
     // @desc Panel offset from anchor
     --_panel-offset: var(--ui-dropdown-menu-panel-offset, var(--ui-space-1, #{t.$space-1}));
     // @desc Panel minimum width

package/src/components/overlays/popover/index.scss

@@ -14,7 +14,7 @@
     --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
     --_ease-default: var(--ui-ease-default, ease);
     // @desc Background color
-    --_bg: var(--ui-popover-bg, var(--ui-color-bg, white));
+    --_bg: var(--ui-popover-bg, var(--ui-color-bg, #{t.$color-bg}));
     // @desc Border color
     --_border-color: var(--ui-popover-border-color, var(--ui-color-border, #{t.$color-border}));
     // @desc Corner radius

package/src/components/typography/list/index.scss

@@ -7,7 +7,7 @@
 @layer components.tokens {
   .list {
     // @desc Spacing
-    --_spacing: var(--ui-list-spacing, #{t.$unit});
+    --_spacing: var(--ui-list-spacing, var(--ui-unit, #{t.$unit}));
     // @desc Marker color
     --_marker-color: var(--ui-list-marker-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
     // @desc Indent