@progress/kendo-theme-utils 11.1.0-dev.3 → 11.1.0-dev.5

package/scss/border/_outline-color.scss

@@ -28,6 +28,222 @@
 /// @group outline-color
 /// @contextType css
 
+/// Sets the border color to the app surface color.
+/// @example outline-color: var(--kendo-color-app-surface, #fafafa);
+/// @name .k-outline-app-surface
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the on app surface color.
+/// @example outline-color: var(--kendo-color-on-app-surface, #424242);
+/// @name .k-outline-on-app-surface
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the subtle color.
+/// @example outline-color: var(--kendo-color-subtle, #666666);
+/// @name .k-outline-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the surface color.
+/// @example outline-color: var(--kendo-color-surface, #ffffff);
+/// @name .k-outline-surface
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the surface alt color.
+/// @example outline-color: var(--kendo-color-surface-alt, #f5f5f5);
+/// @name .k-outline-surface-alt
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the border color.
+/// @example outline-color: var(--kendo-color-border, #d9d9d9);
+/// @name .k-outline-border
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the border alt color.
+/// @example outline-color: var(--kendo-color-outline-alt, #e0e0e0);
+/// @name .k-outline-alt
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the base subtle color.
+/// @example outline-color: var(--kendo-color-base-subtle, #f0f0f0);
+/// @name .k-outline-base-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the base emphasis color.
+/// @example outline-color: var(--kendo-color-base-emphasis, #000000);
+/// @name .k-outline-base-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the primary subtle color.
+/// @example outline-color: var(--kendo-color-primary-subtle, #e3f2fd);
+/// @name .k-outline-primary-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the primary color.
+/// @example outline-color: var(--kendo-color-primary, #2196f3);
+/// @name .k-outline-primary
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the primary emphasis color.
+/// @example outline-color: var(--kendo-color-primary-emphasis, #1976d2);
+/// @name .k-outline-primary-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the secondary subtle color.
+/// @example outline-color: var(--kendo-color-secondary-subtle, #f3e5f5);
+/// @name .k-outline-secondary-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the secondary color.
+/// @example outline-color: var(--kendo-color-secondary, #9c27b0);
+/// @name .k-outline-secondary
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the secondary emphasis color.
+/// @example outline-color: var(--kendo-color-secondary-emphasis, #7b1fa2);
+/// @name .k-outline-secondary-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the tertiary subtle color.
+/// @example outline-color: var(--kendo-color-tertiary-subtle, #fff3e0);
+/// @name .k-outline-tertiary-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the tertiary color.
+/// @example outline-color: var(--kendo-color-tertiary, #ff9800);
+/// @name .k-outline-tertiary
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the tertiary emphasis color.
+/// @example outline-color: var(--kendo-color-tertiary-emphasis, #f57c00);
+/// @name .k-outline-tertiary-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the info subtle color.
+/// @example outline-color: var(--kendo-color-info-subtle, #e1f5fe);
+/// @name .k-outline-info-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the info color.
+/// @example outline-color: var(--kendo-color-info, #00bcd4);
+/// @name .k-outline-info
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the info emphasis color.
+/// @example outline-color: var(--kendo-color-info-emphasis, #0097a7);
+/// @name .k-outline-info-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the success subtle color.
+/// @example outline-color: var(--kendo-color-success-subtle, #e8f5e8);
+/// @name .k-outline-success-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the success color.
+/// @example outline-color: var(--kendo-color-success, #4caf50);
+/// @name .k-outline-success
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the success emphasis color.
+/// @example outline-color: var(--kendo-color-success-emphasis, #388e3c);
+/// @name .k-outline-success-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the warning subtle color.
+/// @example outline-color: var(--kendo-color-warning-subtle, #fff8e1);
+/// @name .k-outline-warning-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the warning color.
+/// @example outline-color: var(--kendo-color-warning, #ff9800);
+/// @name .k-outline-warning
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the warning emphasis color.
+/// @example outline-color: var(--kendo-color-warning-emphasis, #f57c00);
+/// @name .k-outline-warning-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the error subtle color.
+/// @example outline-color: var(--kendo-color-error-subtle, #ffebee);
+/// @name .k-outline-error-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the error color.
+/// @example outline-color: var(--kendo-color-error, #f44336);
+/// @name .k-outline-error
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the error emphasis color.
+/// @example outline-color: var(--kendo-color-error-emphasis, #d32f2f);
+/// @name .k-outline-error-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the light subtle color.
+/// @example outline-color: var(--kendo-color-light-subtle, #f8f9fa);
+/// @name .k-outline-light-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the light color.
+/// @example outline-color: var(--kendo-color-light, #f8f9fa);
+/// @name .k-outline-light
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the light emphasis color.
+/// @example outline-color: var(--kendo-color-light-emphasis, #dee2e6);
+/// @name .k-outline-light-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the dark subtle color.
+/// @example outline-color: var(--kendo-color-dark-subtle, #6c757d);
+/// @name .k-outline-dark-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the dark color.
+/// @example outline-color: var(--kendo-color-dark, #343a40);
+/// @name .k-outline-dark
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the dark emphasis color.
+/// @example outline-color: var(--kendo-color-dark-emphasis, #212529);
+/// @name .k-outline-dark-emphasis
+/// @group outline-color
+/// @contextType css
+
 @use "sass:map";
 @use "../_globals.scss" as *;
 

package/scss/effects/_opacity.scss

@@ -4,12 +4,72 @@
 /// @group opacity
 /// @contextType css
 
+/// This is equivalent to `opacity: 0.05;`.
+/// @example opacity: 0.5;
+/// @name .k-opacity-5
+/// @group opacity
+/// @contextType css
+
+/// This is equivalent to `opacity: 0.1;`.
+/// @example opacity: 0.1;
+/// @name .k-opacity-10
+/// @group opacity
+/// @contextType css
+
+/// This is equivalent to `opacity: 0.2;`.
+/// @example opacity: 0.2;
+/// @name .k-opacity-20
+/// @group opacity
+/// @contextType css
+
+/// This is equivalent to `opacity: 0.3;`.
+/// @example opacity: 0.3;
+/// @name .k-opacity-30
+/// @group opacity
+/// @contextType css
+
+/// This is equivalent to `opacity: 0.4;`.
+/// @example opacity: 0.4;
+/// @name .k-opacity-40
+/// @group opacity
+/// @contextType css
+
+/// This is equivalent to `opacity: 0.5;`.
+/// @example opacity: 0.5;
+/// @name .k-opacity-50
+/// @group opacity
+/// @contextType css
+
+/// This is equivalent to `opacity: 0.6;`.
+/// @example opacity: 0.6;
+/// @name .k-opacity-60
+/// @group opacity
+/// @contextType css
+
+/// This is equivalent to `opacity: 0.7;`.
+/// @example opacity: 0.7;
+/// @name .k-opacity-70
+/// @group opacity
+/// @contextType css
+
+/// This is equivalent to `opacity: 0.8;`.
+/// @example opacity: 0.8;
+/// @name .k-opacity-80
+/// @group opacity
+/// @contextType css
+
+/// This is equivalent to `opacity: 0.9;`.
+/// @example opacity: 0.9;
+/// @name .k-opacity-90
+/// @group opacity
+
 /// This is equivalent to `opacity: 1;`.
 /// @example opacity: 1;
-/// @name .k-opacity-1
+/// @name .k-opacity-100
 /// @group opacity
 /// @contextType css
 
+
 @use "sass:map";
 @use "../_globals.scss" as *;
 

package/scss/elevation/index.import.scss

@@ -1,3 +1,57 @@
+/// Applies elevation level 1 shadow effect.
+/// @example box-shadow: var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12));
+/// @name .k-elevation-1
+/// @group elevation
+/// @contextType css
+
+/// Applies elevation level 2 shadow effect.
+/// @example box-shadow: var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12));
+/// @name .k-elevation-2
+/// @group elevation
+/// @contextType css
+
+/// Applies elevation level 3 shadow effect.
+/// @example box-shadow: var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12));
+/// @name .k-elevation-3
+/// @group elevation
+/// @contextType css
+
+/// Applies elevation level 4 shadow effect.
+/// @example box-shadow: var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12));
+/// @name .k-elevation-4
+/// @group elevation
+/// @contextType css
+
+/// Applies elevation level 5 shadow effect.
+/// @example box-shadow: var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12));
+/// @name .k-elevation-5
+/// @group elevation
+/// @contextType css
+
+/// Applies elevation level 6 shadow effect.
+/// @example box-shadow: var(--kendo-elevation-6, 0 12px 14px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12));
+/// @name .k-elevation-6
+/// @group elevation
+/// @contextType css
+
+/// Applies elevation level 7 shadow effect.
+/// @example box-shadow: var(--kendo-elevation-7, 0 14px 16px rgba(0, 0, 0, 0.24), 0 4px 16px rgba(0, 0, 0, 0.12));
+/// @name .k-elevation-7
+/// @group elevation
+/// @contextType css
+
+/// Applies elevation level 8 shadow effect.
+/// @example box-shadow: var(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12));
+/// @name .k-elevation-8
+/// @group elevation
+/// @contextType css
+
+/// Applies elevation level 9 shadow effect.
+/// @example box-shadow: var(--kendo-elevation-9, 0 32px 34px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(0, 0, 0, 0.12));
+/// @name .k-elevation-9
+/// @group elevation
+/// @contextType css
+
 @use "@progress/kendo-theme-core/scss/elevation/index.import.scss" as *;
 @use "../_globals.scss" as *;
 

package/scss/flex-grid/_flex-direction.scss

@@ -22,6 +22,34 @@
 /// @group flex-direction
 /// @contextType css
 
+// ============================================================================
+// Responsive Flex Direction Utilities
+// ============================================================================
+
+/// This is equivalent to `flex-direction: row; for the specific breakpoint`.
+/// @example flex-direction: row;
+/// @name .k-flex-{xs|sm|md|lg|xl|xxl}-row
+/// @group flex-direction-responsive
+/// @contextType css
+
+/// This is equivalent to `flex-direction: row-reverse; for the specific breakpoint`.
+/// @example flex-direction: row-reverse;
+/// @name .k-flex-{xs|sm|md|lg|xl|xxl}-row-reverse
+/// @group flex-direction-responsive
+/// @contextType css
+
+/// This is equivalent to `flex-direction: column; for the specific breakpoint`.
+/// @example flex-direction: column;
+/// @name .k-flex-{xs|sm|md|lg|xl|xxl}-col
+/// @group flex-direction-responsive
+/// @contextType css
+
+/// This is equivalent to `flex-direction: column-reverse; for the specific breakpoint`.
+/// @example flex-direction: column-reverse;
+/// @name .k-flex-{xs|sm|md|lg|xl|xxl}-col-reverse
+/// @group flex-direction-responsive
+/// @contextType css
+
 @use "sass:map";
 @use "../_globals.scss" as *;
 

package/scss/flex-grid/_gap.scss

@@ -1,6 +1,6 @@
 /// This is equivalent to `gap: 0;`.
 /// @example gap: 0;
-/// @name .k-gap-0
+/// @name .k-gap-{0-30}
 /// @group gap
 /// @contextType css
 
@@ -10,9 +10,9 @@
 /// @group gap
 /// @contextType css
 
-/// This is equivalent to `gap: 0.25rem;`.
-/// @example gap: 0.25rem;
-/// @name .k-gap-1
+/// This is equivalent to `gap: 0.125rem;`.
+/// @example gap: 0.125rem;
+/// @name .k-gap-0\.5
 /// @group gap
 /// @contextType css
 
@@ -60,7 +60,7 @@
 
 /// This is equivalent to `column-gap: 0;`.
 /// @example column-gap: 0;
-/// @name .k-gap-x-0
+/// @name .k-gap-x-{0-30}
 /// @group gap
 /// @contextType css
 
@@ -70,9 +70,9 @@
 /// @group gap
 /// @contextType css
 
-/// This is equivalent to `column-gap: 0.25rem;`.
-/// @example column-gap: 0.25rem;
-/// @name .k-gap-x-1
+/// This is equivalent to `column-gap: 0.125rem;`.
+/// @example column-gap: 0.125rem;
+/// @name .k-gap-x-0\.5
 /// @group gap
 /// @contextType css
 
@@ -120,7 +120,7 @@
 
 /// This is equivalent to `row-gap: 0;`.
 /// @example row-gap: 0;
-/// @name .k-gap-y-0
+/// @name .k-gap-y-{0-30}
 /// @group gap
 /// @contextType css
 
@@ -130,9 +130,9 @@
 /// @group gap
 /// @contextType css
 
-/// This is equivalent to `row-gap: 0.25rem;`.
-/// @example row-gap: 0.25rem;
-/// @name .k-gap-y-1
+/// This is equivalent to `row-gap: 0.125rem;`.
+/// @example row-gap: 0.125rem;
+/// @name .k-gap-y-0\.5
 /// @group gap
 /// @contextType css
 
@@ -178,6 +178,190 @@
 /// @group gap
 /// @contextType css
 
+// ============================================================================
+// Responsive Gap Utilities
+// ============================================================================
+
+/// This is equivalent to `gap: 0;`.
+/// @example gap: 0;
+/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-{0-30}
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `gap: 1px;`.
+/// @example gap: 1px;
+/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-1px
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `gap: 0.125rem;`.
+/// @example gap: 0.25rem;
+/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-0\.5
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `gap: 0.25rem;`.
+/// @example gap: 0.25rem;
+/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-xs
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `gap: 0.5rem;`.
+/// @example gap: 0.5rem;
+/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-sm
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `gap: 0.75rem;`.
+/// @example gap: 0.75rem;
+/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-md
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `gap: 1rem;`.
+/// @example gap: 1rem;
+/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-lg
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `gap: 1.5rem;`.
+/// @example gap: 1.5rem;
+/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-xl
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `gap: 0.125rem;`.
+/// @example gap: 0.125rem;
+/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-thin
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `gap: 1px;`.
+/// @example gap: 1px;
+/// @name .k-gap-hair-{xs|sm|md|lg|xl|xxl}
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `column-gap: 0;`.
+/// @example column-gap: 0;
+/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-{0-30}
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `column-gap: 1px;`.
+/// @example column-gap: 1px;
+/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-1px
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `column-gap: 0.125rem;`.
+/// @example column-gap: 0.125rem;
+/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-0\.5
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `column-gap: 0.25rem;`.
+/// @example column-gap: 0.25rem;
+/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-xs
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `column-gap: 0.5rem;`.
+/// @example column-gap: 0.5rem;
+/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-sm
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `column-gap: 0.75rem;`.
+/// @example column-gap: 0.75rem;
+/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-md
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `column-gap: 1rem;`.
+/// @example column-gap: 1rem;
+/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-lg
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `column-gap: 1.5rem;`.
+/// @example column-gap: 1.5rem;
+/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-xl
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `column-gap: 0.125rem;`.
+/// @example column-gap: 0.125rem;
+/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-thin
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `column-gap: 1px;`.
+/// @example column-gap: 1px;
+/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-hair
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `row-gap: 0;`.
+/// @example row-gap: 0;
+/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-{0-30}
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `row-gap: 1px;`.
+/// @example row-gap: 1px;
+/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-1px
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `row-gap: 0.125rem;`.
+/// @example row-gap: 0.125rem;
+/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-0\.5
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `row-gap: 0.25rem;`.
+/// @example row-gap: 0.25rem;
+/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-xs
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `row-gap: 0.5rem;`.
+/// @example row-gap: 0.5rem;
+/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-sm
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `row-gap: 0.75rem;`.
+/// @example row-gap: 0.75rem;
+/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-md
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `row-gap: 1rem;`.
+/// @example row-gap: 1rem;
+/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-lg
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `row-gap: 1.5rem;`.
+/// @example row-gap: 1.5rem;
+/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-xl
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `row-gap: 0.125rem;`.
+/// @example row-gap: 0.125rem;
+/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-thin
+/// @group gap-responsive
+/// @contextType css
+
+/// This is equivalent to `row-gap: 1px;`.
+/// @example row-gap: 1px;
+/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-hair
+/// @group gap-responsive
+/// @contextType css
+
 @use "sass:map";
 @use "../_globals.scss" as *;