@oardi/css-utils 0.131.1 → 0.133.0

package/css-utils-manifest.json

@@ -1,6 +1,6 @@
 {
 	"package": "@oardi/css-utils",
-	"version": "0.131.1",
+	"version": "0.133.0",
 	"breakpoints": { "sm": "576px", "md": "768px", "lg": "992px", "xl": "1200px", "xxl": "1400px" },
 	"lifecycle": {
 		"deprecated": [
@@ -76,7 +76,7 @@
 					"values": ["normal", "tight", "wide", "wider", "widest"]
 				},
 				{
-					"patterns": ["lh-{value}"],
+					"patterns": ["lh-{value}", "text-{breakpoint}-{value}"],
 					"values": ["lg", "md", "sm", "xl", "xs", "xxl", "xxxl"]
 				},
 				{

package/css-utils-reference.md

@@ -3,7 +3,7 @@
 > Generated automatically. Do not edit manually.
 
 - Package: `@oardi/css-utils`
-- Version: `0.131.1`
+- Version: `0.133.0`
 - Source: public SCSS entry point and utility configuration
 
 ## Usage guidance
@@ -104,6 +104,7 @@ Values: `normal` | `tight` | `wide` | `wider` | `widest`
 Values: `lg` | `md` | `sm` | `xl` | `xs` | `xxl` | `xxxl`
 
 - `lh-{value}`
+- `text-{breakpoint}-{value}`
 
 Values: `loose` | `none` | `normal` | `relaxed` | `snug` | `tight`
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.131.1",
+	"version": "0.133.0",
 	"author": "Ardian Shala",
 	"homepage": "https://css-utils.oardi.com",
 	"description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",
@@ -24,6 +24,10 @@
 			"sass": "./scss/theme.scss",
 			"default": "./scss/theme.scss"
 		},
+		"./tokens": {
+			"sass": "./scss/variables.scss",
+			"default": "./scss/variables.scss"
+		},
 		"./components/*": {
 			"sass": "./scss/components/*.scss",
 			"default": "./scss/components/*.scss"

package/readme.md

@@ -86,7 +86,27 @@ For custom responsive SCSS, import the breakpoint mixins without loading the lib
 
 The Dart Sass CLI uses `@use 'pkg:@oardi/css-utils/breakpoints' as bp;` with `--pkg-importer=node`.
 
-Import theme values without generating CSS via `@use '@oardi/css-utils/theme' as theme;`. To load one component's styles, use a path such as `@use '@oardi/css-utils/components/button';`. The Dart Sass CLI uses the same paths with a `pkg:` prefix.
+Import theme values without generating CSS via `@use '@oardi/css-utils/theme' as theme;`.
+
+## Load individual components
+
+Load the shared design tokens once alongside the components you need:
+
+```scss
+@use '@oardi/css-utils/tokens';
+@use '@oardi/css-utils/components/button';
+```
+
+`tokens` emits the default CSS variables, dark-theme overrides (`data-theme="dark"` on `<html>`) and reduced-motion settings. It establishes the shared cascade order without loading reset, typography, utility or component rules. Component imports require these tokens unless your application already loads the full library or supplies all required variables itself.
+
+The full `@use '@oardi/css-utils';` import already includes the tokens. Sass emits them only once if both entry points are used in the same compilation. Override CSS variables after the imports as shown below.
+
+The Dart Sass CLI uses the same paths with a `pkg:` prefix and `--pkg-importer=node`:
+
+```scss
+@use 'pkg:@oardi/css-utils/tokens';
+@use 'pkg:@oardi/css-utils/components/button';
+```
 
 ## Browser support
 

package/scss/components/form.scss

@@ -329,13 +329,13 @@
 
 @layer components {
 	@media (forced-colors: active) {
-		.form-check .form-check-input:where([type='checkbox']) {
+		.form-check .form-check-input {
 			forced-color-adjust: none;
 			background-color: Canvas;
 			border-color: CanvasText;
 
 			&:checked,
-			&:indeterminate {
+			&:where([type='checkbox']):indeterminate {
 				background-color: Highlight;
 				border-color: Highlight;
 			}
@@ -344,7 +344,11 @@
 				border-color: HighlightText;
 			}
 
-			&:indeterminate::after {
+			&:where([type='checkbox']):indeterminate::after {
+				background-color: HighlightText;
+			}
+
+			&[type='radio']:checked::after {
 				background-color: HighlightText;
 			}
 
@@ -372,7 +376,11 @@
 					border-color: GrayText;
 				}
 
-				&:indeterminate::after {
+				&:where([type='checkbox']):indeterminate::after {
+					background-color: GrayText;
+				}
+
+				&[type='radio']:checked::after {
 					background-color: GrayText;
 				}
 			}
@@ -548,3 +556,46 @@
 		}
 	}
 }
+
+@layer components {
+	@media (forced-colors: active) {
+		.form-switch .form-switch-input {
+			forced-color-adjust: none;
+			background-color: Canvas;
+			border-color: CanvasText;
+
+			&::after {
+				background-color: CanvasText;
+				box-shadow: none;
+			}
+
+			&:checked {
+				background-color: Highlight;
+				border-color: Highlight;
+
+				&::after {
+					background-color: HighlightText;
+				}
+			}
+
+			&:focus-visible,
+			&.is-focus-visible {
+				outline-color: Highlight;
+			}
+
+			&.is-invalid {
+				border-color: LinkText;
+			}
+
+			&:disabled,
+			&[disabled] {
+				background-color: Canvas;
+				border-color: GrayText;
+
+				&::after {
+					background-color: GrayText;
+				}
+			}
+		}
+	}
+}

package/scss/text.scss

@@ -87,6 +87,16 @@ $letterSpacings: 0, 1, 2, 3, 4, 5;
 		}
 	}
 
+	@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
+		@media (min-width: #{$bp-value}) {
+			@each $name, $value in map.get(theme.$theme, fontSizes) {
+				.text-#{$bp}-#{$name} {
+					font-size: var(--font-size-#{$name});
+				}
+			}
+		}
+	}
+
 	// Deprecated: use .line-height-* utilities instead.
 	@each $name, $value in map.get(theme.$theme, lineHeights) {
 		.lh-#{$name} {