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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-utils",
   "description": "Utility first library alongside Kendo UI",
-  "version": "11.1.0-dev.4",
+  "version": "11.1.0-dev.5",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -44,10 +44,10 @@
     "postpublish": "echo 'no postpublish for utils'"
   },
   "dependencies": {
-    "@progress/kendo-theme-core": "11.1.0-dev.4"
+    "@progress/kendo-theme-core": "11.1.0-dev.5"
   },
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "e3ca3e519a00fa4da7a575c64aba2e6a7e34991d"
+  "gitHead": "df7b83831d15c445082b4167f8ad24267d13a64a"
 }

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/flex-grid/_grid-column-start-end.scss

@@ -334,7 +334,7 @@
 
 /// This is equivalent to `grid-column-start: auto; for the specific breakpoint`.
 /// @example grid-column-start: auto;
-/// @name .k-col-start-auto
+/// @name .k-col-start-{xs|sm|md|lg|xl|xxl}-auto
 /// @group grid-column-responsive
 /// @contextType css
 
@@ -430,49 +430,49 @@
 
 /// This is equivalent to `grid-column-end: 2; for the specific breakpoint`.
 /// @example grid-column-end: 2;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-12
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-2
 /// @group grid-column-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-column-end: 3; for the specific breakpoint`.
 /// @example grid-column-end: 3;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-13
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-3
 /// @group grid-column-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-column-end: 4; for the specific breakpoint`.
 /// @example grid-column-end: 4;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-14
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-4
 /// @group grid-column-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-column-end: 5; for the specific breakpoint`.
 /// @example grid-column-end: 5;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-15
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-5
 /// @group grid-column-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-column-end: 6; for the specific breakpoint`.
 /// @example grid-column-end: 6;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-16
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-6
 /// @group grid-column-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-column-end: 7; for the specific breakpoint`.
 /// @example grid-column-end: 7;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-17
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-7
 /// @group grid-column-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-column-end: 8; for the specific breakpoint`.
 /// @example grid-column-end: 8;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-18
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-8
 /// @group grid-column-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-column-end: 9; for the specific breakpoint`.
 /// @example grid-column-end: 9;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-19
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-9
 /// @group grid-column-responsive
 /// @contextType css
 
@@ -502,7 +502,7 @@
 
 /// This is equivalent to `grid-column-end: auto; for the specific breakpoint`.
 /// @example grid-column-end: auto;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-1auto
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-auto
 /// @group grid-column-responsive
 /// @contextType css
 

package/scss/flex-grid/_grid-template-columns.scss

@@ -88,49 +88,49 @@
 
 /// This is equivalent to `grid-template-columns: repeat(2, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(2, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl2
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-2
 /// @group grid-template-columns-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-template-columns: repeat(3, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(3, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl3
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-3
 /// @group grid-template-columns-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-template-columns: repeat(4, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(4, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl4
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-4
 /// @group grid-template-columns-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-template-columns: repeat(5, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(5, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl5
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-5
 /// @group grid-template-columns-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-template-columns: repeat(6, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(6, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl6
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-6
 /// @group grid-template-columns-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-template-columns: repeat(7, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(7, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl7
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-7
 /// @group grid-template-columns-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-template-columns: repeat(8, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(8, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl8
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-8
 /// @group grid-template-columns-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-template-columns: repeat(9, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(9, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl9
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-9
 /// @group grid-template-columns-responsive
 /// @contextType css
 
@@ -152,12 +152,6 @@
 /// @group grid-template-columns-responsive
 /// @contextType css
 
-/// This is equivalent to `grid-template-columns: none;`.
-/// @example grid-template-columns: none;
-/// @name .k-grid-cols-none
-/// @group grid-template-columns
-/// @contextType css
-
 @use "sass:map";
 @use "../_globals.scss" as *;
 

package/scss/flex-grid/_grid-template-rows.scss

@@ -10,6 +10,66 @@
 /// @group grid-template-rows
 /// @contextType css
 
+/// This is equivalent to `grid-template-rows: repeat(3, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(3, minmax(0, 1fr));
+/// @name .k-grid-rows-3
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(4, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(4, minmax(0, 1fr));
+/// @name .k-grid-rows-4
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(5, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(5, minmax(0, 1fr));
+/// @name .k-grid-rows-5
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(6, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(6, minmax(0, 1fr));
+/// @name .k-grid-rows-6
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(7, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(7, minmax(0, 1fr));
+/// @name .k-grid-rows-7
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(8, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(8, minmax(0, 1fr));
+/// @name .k-grid-rows-8
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(9, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(9, minmax(0, 1fr));
+/// @name .k-grid-rows-9
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(10, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(10, minmax(0, 1fr));
+/// @name .k-grid-rows-10
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(11, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(11, minmax(0, 1fr));
+/// @name .k-grid-rows-11
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(12, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(12, minmax(0, 1fr));
+/// @name .k-grid-rows-12
+/// @group grid-template-rows
+/// @contextType css
+
 /// This is equivalent to `grid-template-rows: none;`.
 /// @example grid-template-rows: none;
 /// @name .k-grid-rows-none

package/scss/flex-grid/_order.scss

@@ -1,6 +1,6 @@
 /// This is equivalent to `order: 1;`.
 /// @example order: 1;
-/// @name .k-order-first
+/// @name .k-order-{1-12}
 /// @group order
 /// @contextType css
 

package/scss/layout/_display.scss

@@ -82,6 +82,94 @@
 /// @group display
 /// @contextType css
 
+// ============================================================================
+// Responsive Display Utilities
+// ============================================================================
+
+/// This is equivalent to `display: none;`.
+/// @example display: none;
+/// @name .k-d-{xs|md|lg|xl|xxl}-none
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: contents;`.
+/// @example display: contents;
+/// @name .k-d-{xs|md|lg|xl|xxl}-contents
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: block;`.
+/// @example display: block;
+/// @name .k-d-{xs|md|lg|xl|xxl}-block
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: inline;`.
+/// @example display: inline;
+/// @name .k-d-{xs|md|lg|xl|xxl}-inline
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: inline-block;`.
+/// @example display: inline-block;
+/// @name .k-d-{xs|md|lg|xl|xxl}-inline-block
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: flex;`.
+/// @example display: flex;
+/// @name .k-d-{xs|md|lg|xl|xxl}-flex
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: inline-flex;`.
+/// @example display: inline-flex;
+/// @name .k-d-{xs|md|lg|xl|xxl}-inline-flex
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
+/// @example display: grid
+/// @name .k-d-{xs|md|lg|xl|xxl}-grid
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: inline-grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
+/// @example display: inline-grid
+/// @name .k-d-{xs|md|lg|xl|xxl}-inline-grid
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: table;`.
+/// @example display: table;
+/// @name .k-d-{xs|md|lg|xl|xxl}-table
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: inline-table;`.
+/// @example display: inline-table;
+/// @name .k-d-{xs|md|lg|xl|xxl}-inline-table
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: list-item;`.
+/// @example display: list-item;
+/// @name .k-d-{xs|md|lg|xl|xxl}-list-item
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: table-row;`.
+/// @example display: table-row;
+/// @name .k-d-{xs|md|lg|xl|xxl}-table-row
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: table-cell;`.
+/// @example display: table-cell;
+/// @name .k-d-{xs|md|lg|xl|xxl}-table-cell
+/// @group display-responsive
+/// @contextType css
+
 @use "sass:map";
 @use "../_globals.scss" as *;