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

package/scss/spacing/_padding.scss

@@ -1,6 +1,6 @@
 /// This is equivalent to `padding: 0;`.
 /// @example padding: 0;
-/// @name .k-p-0
+/// @name .k-p-{0-30}
 /// @group padding
 /// @contextType css
 
@@ -10,9 +10,15 @@
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding: 0.25rem;`.
-/// @example padding: 0.25rem;
-/// @name .k-p-1
+/// This is equivalent to `padding: 0.125rem;`.
+/// @example padding: 0.125rem;
+/// @name .k-p-0\.5
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding: 0.125rem;`.
+/// @example padding: 0.125rem;
+/// @name .k-p-{xs|sm|md|lg|xl|xxl}-0\.5
 /// @group padding
 /// @contextType css
 
@@ -66,7 +72,7 @@
 
 /// This is equivalent to `padding-top: 0;`.
 /// @example padding-top: 0;
-/// @name .k-pt-0
+/// @name .k-pt-{0-30}
 /// @group padding
 /// @contextType css
 
@@ -76,9 +82,9 @@
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-top: 0.25rem;`.
-/// @example padding-top: 0.25rem;
-/// @name .k-pt-1
+/// This is equivalent to `padding-top: 0.125rem;`.
+/// @example padding-top: 0.125rem;
+/// @name .k-pt-0\.5
 /// @group padding
 /// @contextType css
 
@@ -132,7 +138,7 @@
 
 /// This is equivalent to `padding-right: 0;`.
 /// @example padding-right: 0;
-/// @name .k-pr-0
+/// @name .k-pr-{0-30}
 /// @group padding
 /// @contextType css
 
@@ -142,9 +148,9 @@
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-right: 0.25rem;`.
-/// @example padding-right: 0.25rem;
-/// @name .k-pr-1
+/// This is equivalent to `padding-right: 0.125rem;`.
+/// @example padding-right: 0.125rem;
+/// @name .k-pr-0\.5
 /// @group padding
 /// @contextType css
 
@@ -198,7 +204,7 @@
 
 /// This is equivalent to `padding-bottom: 0;`.
 /// @example padding-bottom: 0;
-/// @name .k-pb-0
+/// @name .k-pb-{0-30}
 /// @group padding
 /// @contextType css
 
@@ -208,9 +214,9 @@
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-bottom: 0.25rem;`.
-/// @example padding-bottom: 0.25rem;
-/// @name .k-pb-1
+/// This is equivalent to `padding-bottom: 0.125rem;`.
+/// @example padding-bottom: 0.125rem;
+/// @name .k-pb-0\.5
 /// @group padding
 /// @contextType css
 
@@ -264,7 +270,7 @@
 
 /// This is equivalent to `padding-left: 0;`.
 /// @example padding-left: 0;
-/// @name .k-pl-0
+/// @name .k-pl-{0-30}
 /// @group padding
 /// @contextType css
 
@@ -274,9 +280,9 @@
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-left: 0.25rem;`.
-/// @example padding-left: 0.25rem;
-/// @name .k-pl-1
+/// This is equivalent to `padding-left: 0.125rem;`.
+/// @example padding-left: 0.125rem;
+/// @name .k-pl-0\.5
 /// @group padding
 /// @contextType css
 
@@ -330,7 +336,7 @@
 
 /// This is equivalent to `padding-inline: 0;`.
 /// @example padding-inline: 0;
-/// @name .k-px-0
+/// @name .k-px-{0-30}
 /// @group padding
 /// @contextType css
 
@@ -340,9 +346,9 @@
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-inline: 0.25rem;`.
-/// @example padding-inline: 0.25rem;
-/// @name .k-px-1
+/// This is equivalent to `padding-inline: 0.125rem;`.
+/// @example padding-inline: 0.125rem;
+/// @name .k-px-0\.5
 /// @group padding
 /// @contextType css
 
@@ -396,7 +402,7 @@
 
 /// This is equivalent to `padding-block: 0;`.
 /// @example padding-block: 0;
-/// @name .k-py-0
+/// @name .k-py-{0-30}
 /// @group padding
 /// @contextType css
 
@@ -406,9 +412,9 @@
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-block: 0.25rem;`.
-/// @example padding-block: 0.25rem;
-/// @name .k-py-1
+/// This is equivalent to `padding-block: 0.125rem;`.
+/// @example padding-block: 0.125rem;
+/// @name .k-py-0\.5
 /// @group padding
 /// @contextType css
 
@@ -460,6 +466,141 @@
 /// @group padding
 /// @contextType css
 
+// ============================================================================
+// Responsive Padding Utilities
+// ============================================================================
+/// This is equivalent to `padding-inline: 0;`.
+/// @example padding-inline: 0;
+/// @name .k-px-{xs|sm|md|lg|xl|xxl}-{0-30}
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 1px;`.
+/// @example padding-inline: 1px;
+/// @name .k-px-{xs|sm|md|lg|xl|xxl}-1px
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 0.125rem;`.
+/// @example padding-inline: 0.125rem;
+/// @name .k-px-{xs|sm|md|lg|xl|xxl}-0\.5
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 0.25rem;`.
+/// @example padding-inline: 0.25rem;
+/// @name .k-px-{xs|sm|md|lg|xl|xxl}-xs
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 0.5rem;`.
+/// @example padding-inline: 0.5rem;
+/// @name .k-px-{xs|sm|md|lg|xl|xxl}-sm
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 0.75rem;`.
+/// @example padding-inline: 0.75rem;
+/// @name .k-px-{xs|sm|md|lg|xl|xxl}-md
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 1rem;`.
+/// @example padding-inline: 1rem;
+/// @name .k-px-{xs|sm|md|lg|xl|xxl}-lg
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 1.5rem;`.
+/// @example padding-inline: 1.5rem;
+/// @name .k-px-{xs|sm|md|lg|xl|xxl}-xl
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 0.125rem;`.
+/// @example padding-inline: 0.125rem;
+/// @name .k-px-{xs|sm|md|lg|xl|xxl}-thin
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 1px;`.
+/// @example padding-inline: 1px;
+/// @name .k-px-{xs|sm|md|lg|xl|xxl}-hair
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-inline: auto;`.
+/// @example padding-inline: auto;
+/// @name .k-px-{xs|sm|md|lg|xl|xxl}-auto
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-block: 0;`.
+/// @example padding-block: 0;
+/// @name .k-py-{xs|sm|md|lg|xl|xxl}-{0-30}
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-block: 1px;`.
+/// @example padding-block: 1px;
+/// @name .k-py-{xs|sm|md|lg|xl|xxl}-1px
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-block: 0.125rem;`.
+/// @example padding-block: 0.125rem;
+/// @name .k-py-{xs|sm|md|lg|xl|xxl}-0\.5
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-block: 0.25rem;`.
+/// @example padding-block: 0.25rem;
+/// @name .k-py-{xs|sm|md|lg|xl|xxl}-xs
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-block: 0.5rem;`.
+/// @example padding-block: 0.5rem;
+/// @name .k-py-{xs|sm|md|lg|xl|xxl}-sm
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-block: 0.75rem;`.
+/// @example padding-block: 0.75rem;
+/// @name .k-py-{xs|sm|md|lg|xl|xxl}-md
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-block: 1rem;`.
+/// @example padding-block: 1rem;
+/// @name .k-py-{xs|sm|md|lg|xl|xxl}-lg
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-block: 1.5rem;`.
+/// @example padding-block: 1.5rem;
+/// @name .k-py-{xs|sm|md|lg|xl|xxl}-xl
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-block: 0.125rem;`.
+/// @example padding-block: 0.125rem;
+/// @name .k-py-{xs|sm|md|lg|xl|xxl}-thin
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-block: 1px;`.
+/// @example padding-block: 1px;
+/// @name .k-py-{xs|sm|md|lg|xl|xxl}-hair
+/// @group padding-responsive
+/// @contextType css
+
+/// This is equivalent to `padding-block: auto;`.
+/// @example padding-block: auto;
+/// @name .k-py-{xs|sm|md|lg|xl|xxl}-auto
+/// @group padding-responsive
+/// @contextType css
+
 @use "sass:map";
 @use "../_globals.scss" as *;
 

package/scss/spacing/_space-between.scss

@@ -1,4 +1,5 @@
-// TODO: docs
+// TODO: Check if this is still needed as we do not generate spacing utilities at the moment
+
 @use "sass:map";
 @use "../_globals.scss" as *;
 

package/scss/typography/_font-family.scss

@@ -1,3 +1,27 @@
+/// Sets the font family to the default sans-serif font stack.
+/// @example font-family: var(--kendo-font-family-sans-serif, inherit);
+/// @name .k-font-family-sans-serif
+/// @group font-family
+/// @contextType css
+
+/// Sets the font family to the default monospace font stack.
+/// @example font-family: var(--kendo-font-family-monospace, inherit);
+/// @name .k-font-family-monospace
+/// @group font-family
+/// @contextType css
+
+/// Sets the font family to the default sans font stack.
+/// @example font-family: var(--kendo-font-family-sans, inherit);
+/// @name .k-font-family-sans
+/// @group font-family
+/// @contextType css
+
+/// Sets the font family to the default serif font stack.
+/// @example font-family: var(--kendo-font-family-serif, inherit);
+/// @name .k-font-family-serif
+/// @group font-family
+/// @contextType css
+
 @use "@progress/kendo-theme-core/scss/index.scss" as *;
 @use "../_globals.scss" as *;
 

package/scss/typography/_font-style.scss

@@ -1,12 +1,18 @@
 /// This is equivalent to `font-style: italic;`.
-/// @example font-style: italic;
-/// @name .k-font-italic
+/// @example font-style: var(--kendo-font-style-italic, italic);
+/// @name .k-font-style-italic
 /// @group font-style
 /// @contextType css
 
 /// This is equivalent to `font-style: normal;`.
-/// @example font-style: normal;
-/// @name .k-font-non-italic
+/// @example font-style: var(--kendo-font-style-non-italic, normal);
+/// @name .k-font-style-non-italic
+/// @group font-style
+/// @contextType css
+
+/// This is equivalent to `font-style: oblique;`.
+/// @example font-style: var(--kendo-font-style-oblique, oblique);
+/// @name .k-font-style-oblique
 /// @group font-style
 /// @contextType css
 

package/scss/typography/_letter-spacing.scss

@@ -1,6 +1,48 @@
 @use "@progress/kendo-theme-core/scss/index.scss" as *;
 @use "../_globals.scss" as *;
 
+/// Sets letter spacing to the tightest value.
+/// @example letter-spacing: var(--kendo-letter-spacing-tightest, -0.15px);
+/// @name .k-letter-spacing-tightest
+/// @group letter-spacing
+/// @contextType css
+
+/// Sets letter spacing to the tighter value.
+/// @example letter-spacing: var(--kendo-letter-spacing-tighter, -0.1px);
+/// @name .k-letter-spacing-tighter
+/// @group letter-spacing
+/// @contextType css
+
+/// Sets letter spacing to the tight value.
+/// @example letter-spacing: var(--kendo-letter-spacing-tight, -0.5px);
+/// @name .k-letter-spacing-tight
+/// @group letter-spacing
+/// @contextType css
+
+/// Sets letter spacing to the normal value.
+/// @example letter-spacing: var(--kendo-letter-spacing-normal, 0px);
+/// @name .k-letter-spacing-normal
+/// @group letter-spacing
+/// @contextType css
+
+/// Sets letter spacing to the wide value.
+/// @example letter-spacing: var(--kendo-letter-spacing-wide, 0.5px);
+/// @name .k-letter-spacing-wide
+/// @group letter-spacing
+/// @contextType css
+
+/// Sets letter spacing to the wider value.
+/// @example letter-spacing: var(--kendo-letter-spacing-wider, 0.1px);
+/// @name .k-letter-spacing-wider
+/// @group letter-spacing
+/// @contextType css
+
+/// Sets letter spacing to the widest value.
+/// @example letter-spacing: var(--kendo-letter-spacing-widest, 0.15px);
+/// @name .k-letter-spacing-widest
+/// @group letter-spacing
+/// @contextType css
+
 @mixin kendo-utils--typography--letter-spacing() {
     @include import-once("utils-typography-letter-spacing") {
 

package/scss/typography/_line-height.scss

@@ -1,3 +1,27 @@
+/// Sets line height to extra small value.
+/// @example line-height: var(--kendo-line-height-xs, 1);
+/// @name .k-line-height-xs
+/// @group line-height
+/// @contextType css
+
+/// Sets line height to small value.
+/// @example line-height: var(--kendo-line-height-sm, 1.25);
+/// @name .k-line-height-sm
+/// @group line-height
+/// @contextType css
+
+/// Sets line height to medium value.
+/// @example line-height: var(--kendo-line-height-md, 1.4285714286);
+/// @name .k-line-height-md
+/// @group line-height
+/// @contextType css
+
+/// Sets line height to large value.
+/// @example line-height: var(--kendo-line-height-lg, 1.5);
+/// @name .k-line-height-lg
+/// @group line-height
+/// @contextType css
+
 @use "@progress/kendo-theme-core/scss/index.scss" as *;
 @use "../_globals.scss" as *;
 

package/scss/typography/_text-color.scss

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