@progress/kendo-theme-utils 6.2.1-dev.0 → 6.2.1-dev.151

package/scss/border/_border-width.scss

@@ -1,4 +1,214 @@
-// TODO: docs
+/// This is equivalent to `border-width: 1px;`.
+/// @example border-width: 1px;
+/// @name .k-border
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-width: 0;`.
+/// @example border-width: 0;
+/// @name .k-border-0
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-width: 2px;`.
+/// @example border-width: 2px;
+/// @name .k-border-2
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-width: 4px;`.
+/// @example border-width: 4px;
+/// @name .k-border-4
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-width: 8px;`.
+/// @example border-width: 8px;
+/// @name .k-border-8
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-top-width: 1px;`.
+/// @example border-top-width: 1px;
+/// @name .k-border-t
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-top-width: 0px;`.
+/// @example border-top-width: 0px;
+/// @name .k-border-t-0
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-top-width: 2px;`.
+/// @example border-top-width: 2px;
+/// @name .k-border-t-2
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-top-width: 4px;`.
+/// @example border-top-width: 4px;
+/// @name .k-border-t-4
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-top-width: 8px;`.
+/// @example border-top-width: 8px;
+/// @name .k-border-t-8
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-right-width: 1px;`.
+/// @example border-right-width: 1px;
+/// @name .k-border-r
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-right-width: 0px;`.
+/// @example border-right-width: 0px;
+/// @name .k-border-r-0
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-right-width: 2px;`.
+/// @example border-right-width: 2px;
+/// @name .k-border-r-2
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-right-width: 4px;`.
+/// @example border-right-width: 4px;
+/// @name .k-border-r-4
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-right-width: 8px;`.
+/// @example border-right-width: 8px;
+/// @name .k-border-r-8
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-bottom-width: 1px;`.
+/// @example border-bottom-width: 1px;
+/// @name .k-border-b
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-bottom-width: 0px;`.
+/// @example border-bottom-width: 0px;
+/// @name .k-border-b-0
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-bottom-width: 2px;`.
+/// @example border-bottom-width: 2px;
+/// @name .k-border-b-2
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-bottom-width: 4px;`.
+/// @example border-bottom-width: 4px;
+/// @name .k-border-b-4
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-bottom-width: 8px;`.
+/// @example border-bottom-width: 8px;
+/// @name .k-border-b-8
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-left-width: 1px;`.
+/// @example border-left-width: 1px;
+/// @name .k-border-l
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-left-width: 0px;`.
+/// @example border-left-width: 0px;
+/// @name .k-border-l-0
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-left-width: 2px;`.
+/// @example border-left-width: 2px;
+/// @name .k-border-l-2
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-left-width: 4px;`.
+/// @example border-left-width: 4px;
+/// @name .k-border-l-4
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-left-width: 8px;`.
+/// @example border-left-width: 8px;
+/// @name .k-border-l-8
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-inline-width: 1px;`.
+/// @example border-inline-width: 1px;
+/// @name .k-border-x
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-inline-width: 0px;`.
+/// @example border-inline-width: 0px;
+/// @name .k-border-x-0
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-inline-width: 2px;`.
+/// @example border-inline-width: 2px;
+/// @name .k-border-x-2
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-inline-width: 4px;`.
+/// @example border-inline-width: 4px;
+/// @name .k-border-x-4
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-inline-width: 8px;`.
+/// @example border-inline-width: 8px;
+/// @name .k-border-x-8
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-block-width: 1px;`.
+/// @example border-block-width: 1px;
+/// @name .k-border-y
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-block-width: 0px;`.
+/// @example border-block-width: 0px;
+/// @name .k-border-y-0
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-block-width: 2px;`.
+/// @example border-block-width: 2px;
+/// @name .k-border-y-2
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-block-width: 4px;`.
+/// @example border-block-width: 4px;
+/// @name .k-border-y-4
+/// @group border-width
+/// @contextType css
+
+/// This is equivalent to `border-block-width: 8px;`.
+/// @example border-block-width: 8px;
+/// @name .k-border-y-8
+/// @group border-width
+/// @contextType css
+
+
 
 @mixin kendo-utils--border--border-width() {
 

package/scss/border/_outline-color.scss

@@ -1,4 +1,32 @@
-// TODO: docs
+/// This is equivalent to `outline-color: inherit;`.
+/// @example outline-color: inherit;
+/// @name .k-outline-inherit
+/// @group outline-color
+/// @contextType css
+
+/// This is equivalent to `outline-color: currentColor;`.
+/// @example outline-color: currentColor;
+/// @name .k-outline-currentColor
+/// @group outline-color
+/// @contextType css
+
+/// This is equivalent to `outline-color: transparent;`.
+/// @example outline-color: transparent;
+/// @name .k-outline-transparent
+/// @group outline-color
+/// @contextType css
+
+/// This is equivalent to `outline-color: black;`.
+/// @example outline-color: black;
+/// @name .k-outline-black
+/// @group outline-color
+/// @contextType css
+
+/// This is equivalent to `outline-color: white;`.
+/// @example outline-color: white;
+/// @name .k-outline-white
+/// @group outline-color
+/// @contextType css
 
 @mixin kendo-utils--border--outline-color() {
 

package/scss/border/_outline-offset.scss

@@ -1,4 +1,32 @@
-// TODO: docs
+/// This is equivalent to `outline-offset: 1px;`.
+/// @example outline-offset: 1px;
+/// @name .k-outline-offset
+/// @group outline-offset
+/// @contextType css
+
+/// This is equivalent to `outline-offset: 0;`.
+/// @example outline-offset: 0;
+/// @name .k-outline-offset-0
+/// @group outline-offset
+/// @contextType css
+
+/// This is equivalent to `outline-offset: 2px;`.
+/// @example outline-offset: 2px;
+/// @name .k-outline-offset-2
+/// @group outline-offset
+/// @contextType css
+
+/// This is equivalent to `outline-offset: 4px;`.
+/// @example outline-offset: 4px;
+/// @name .k-outline-offset-4
+/// @group outline-offset
+/// @contextType css
+
+/// This is equivalent to `outline-offset: 8px;`.
+/// @example outline-offset: 8px;
+/// @name .k-outline-offset-8
+/// @group outline-offset
+/// @contextType css
 
 @mixin kendo-utils--border--outline-offset() {
 

package/scss/border/_outline-style.scss

@@ -1,4 +1,38 @@
-// TODO: docs
+/// This is equivalent to `outline-style: solid;`.
+/// @example outline-style: solid;
+/// @name .k-outline-solid
+/// @group outline-style
+/// @contextType css
+
+/// This is equivalent to `outline-style: dashed;`.
+/// @example outline-style: dashed;
+/// @name .k-outline-dashed
+/// @group outline-style
+/// @contextType css
+
+/// This is equivalent to `outline-style: dotted;`.
+/// @example outline-style: dotted;
+/// @name .k-outline-dotted
+/// @group outline-style
+/// @contextType css
+
+/// This is equivalent to `outline-style: double;`.
+/// @example outline-style: double;
+/// @name .k-outline-double
+/// @group outline-style
+/// @contextType css
+
+/// This is equivalent to `outline-style: hidden;`.
+/// @example outline-style: hidden;
+/// @name .k-outline-hidden
+/// @group outline-style
+/// @contextType css
+
+/// This is equivalent to `outline-style: none;`.
+/// @example outline-style: none;
+/// @name .k-outline-none
+/// @group outline-style
+/// @contextType css
 
 @mixin kendo-utils--border--outline-style() {
 

package/scss/border/_outline-width.scss

@@ -1,4 +1,32 @@
-// TODO: docs
+/// This is equivalent to `outline-width: 1px;`.
+/// @example outline-width: 1px;
+/// @name .k-outline
+/// @group outline-width
+/// @contextType css
+
+/// This is equivalent to `outline-width: 0;`.
+/// @example outline-width: 0;
+/// @name .k-outline-0
+/// @group outline-width
+/// @contextType css
+
+/// This is equivalent to `outline-width: 2px;`.
+/// @example outline-width: 2px;
+/// @name .k-outline-2
+/// @group outline-width
+/// @contextType css
+
+/// This is equivalent to `outline-width: 4px;`.
+/// @example outline-width: 4px;
+/// @name .k-outline-4
+/// @group outline-width
+/// @contextType css
+
+/// This is equivalent to `outline-width: 8px;`.
+/// @example outline-width: 8px;
+/// @name .k-outline-8
+/// @group outline-width
+/// @contextType css
 
 @mixin kendo-utils--border--outline-width() {
 

package/scss/effects/_opacity.scss

@@ -0,0 +1,19 @@
+/// This is equivalent to `opacity: 0;`.
+/// @example opacity: 0;
+/// @name .k-opacity-0
+/// @group opacity
+/// @contextType css
+
+/// This is equivalent to `opacity: 1;`.
+/// @example opacity: 1;
+/// @name .k-opacity-1
+/// @group opacity
+/// @contextType css
+
+@mixin kendo-utils--effects--opacity() {
+
+    // opacity utility classes
+    $kendo-utils-opacity: k-map-get( $kendo-utils, "opacity" ) !default;
+    @include generate-utils( opacity, opacity, $kendo-utils-opacity );
+
+}

package/scss/effects/index.import.scss

@@ -0,0 +1,7 @@
+// box shadow
+// box shadow color
+@import "./_opacity.scss";
+
+@mixin kendo-utils--effects() {
+    @include kendo-utils--effects--opacity();
+}

package/scss/filter/_backdrop.scss

@@ -0,0 +1,37 @@
+/// This is equivalent to `backdrop-filter: blur(8px);`.
+/// @example backdrop-filter: blur(8px);
+/// @name .k-backdrop-blur
+/// @group backdrop-blur
+/// @contextType css
+
+/// This is equivalent to `backdrop-filter: blur(0);`.
+/// @example backdrop-filter: blur(0);
+/// @name .k-backdrop-blur-none
+/// @group backdrop-blur
+/// @contextType css
+
+/// This is equivalent to `backdrop-filter: blur(4px);`.
+/// @example backdrop-filter: blur(4px);
+/// @name .k-backdrop-blur-sm
+/// @group backdrop-blur
+/// @contextType css
+
+/// This is equivalent to `backdrop-filter: blur(6px);`.
+/// @example backdrop-filter: blur(6px);
+/// @name .k-backdrop-blur-md
+/// @group backdrop-blur
+/// @contextType css
+
+/// This is equivalent to `backdrop-filter: blur(12px);`.
+/// @example backdrop-filter: blur(12px);
+/// @name .k-backdrop-blur-lg
+/// @group backdrop-blur
+/// @contextType css
+
+@mixin kendo-utils--filter--backdrop() {
+
+    // backdrop utility classes
+    $kendo-utils-backdrop-blur: k-map-get( $kendo-utils, "backdrop-blur" ) !default;
+    @include generate-utils( backdrop-blur, backdrop-filter, $kendo-utils-backdrop-blur );
+
+}

package/scss/filter/index.import.scss

@@ -0,0 +1,5 @@
+@import "./_backdrop.scss";
+
+@mixin kendo-utils--filter() {
+    @include kendo-utils--filter--backdrop();
+}

package/scss/flex-grid/_align-content.scss

@@ -1,4 +1,80 @@
-// TODO: docs
+/// This is equivalent to `align-content: normal;`.
+/// @example align-content: normal;
+/// @name .k-align-content-normal
+/// @group align-content
+/// @contextType css
+
+/// This is equivalent to `align-content: stretch;`.
+/// @example align-content: stretch;
+/// @name .k-align-content-stretch
+/// @group align-content
+/// @contextType css
+
+/// This is equivalent to `align-content: center;`.
+/// @example align-content: center;
+/// @name .k-align-content-center
+/// @group align-content
+/// @contextType css
+
+/// This is equivalent to `align-content: start;`.
+/// @example align-content: start;
+/// @name .k-align-content-start
+/// @group align-content
+/// @contextType css
+
+/// This is equivalent to `align-content: end;`.
+/// @example align-content: end;
+/// @name .k-align-content-end
+/// @group align-content
+/// @contextType css
+
+/// This is equivalent to `align-content: flex-start;`.
+/// @example align-content: flex-start;
+/// @name .k-align-content-flex-start
+/// @group align-content
+/// @contextType css
+
+/// This is equivalent to `align-content: flex-end;`.
+/// @example align-content: flex-end;
+/// @name .k-align-content-flex-end
+/// @group align-content
+/// @contextType css
+
+/// This is equivalent to `align-content: baseline;`.
+/// @example align-content: baseline;
+/// @name .k-align-content-baseline
+/// @group align-content
+/// @contextType css
+
+/// This is equivalent to `align-content: first baseline;`.
+/// @example align-content: first baseline;
+/// @name .k-align-content-first-baseline
+/// @group align-content
+/// @contextType css
+
+/// This is equivalent to `align-content: last baseline;`.
+/// @example align-content: last baseline;
+/// @name .k-align-content-last-baseline
+/// @group align-content
+/// @contextType css
+
+/// This is equivalent to `align-content: space-between;`.
+/// @example align-content: space-between;
+/// @name .k-align-content-between
+/// @group align-content
+/// @contextType css
+
+/// This is equivalent to `align-content: space-around;`.
+/// @example align-content: space-around;
+/// @name .k-align-content-around
+/// @group align-content
+/// @contextType css
+
+/// This is equivalent to `align-content: space-evenly;`.
+/// @example align-content: space-evenly;
+/// @name .k-align-content-evenly
+/// @group align-content
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--align-content() {
 

package/scss/flex-grid/_align-items.scss

@@ -1,4 +1,74 @@
-// TODO: docs
+/// This is equivalent to `align-items: normal;`.
+/// @example align-items: normal;
+/// @name .k-align-items-normal
+/// @group align-items
+/// @contextType css
+
+/// This is equivalent to `align-items: stretch;`.
+/// @example align-items: stretch;
+/// @name .k-align-items-stretch
+/// @group align-items
+/// @contextType css
+
+/// This is equivalent to `align-items: center;`.
+/// @example align-items: center;
+/// @name .k-align-items-stretch
+/// @group align-items
+/// @contextType css
+
+/// This is equivalent to `align-items: start;`.
+/// @example align-items: start;
+/// @name .k-align-items-start
+/// @group align-items
+/// @contextType css
+
+/// This is equivalent to `align-items: end;`.
+/// @example align-items: end;
+/// @name .k-align-items-end
+/// @group align-items
+/// @contextType css
+
+/// This is equivalent to `align-items: flex-start;`.
+/// @example align-items: flex-start;
+/// @name .k-align-items-flex-start
+/// @group align-items
+/// @contextType css
+
+/// This is equivalent to `align-items: flex-end;`.
+/// @example align-items: flex-end;
+/// @name .k-align-items-flex-end
+/// @group align-items
+/// @contextType css
+
+/// This is equivalent to `align-items: baseline;`.
+/// @example align-items: baseline;
+/// @name .k-align-items-baseline
+/// @group align-items
+/// @contextType css
+
+/// This is equivalent to `align-items: first baseline;`.
+/// @example align-items: first baseline;
+/// @name .k-align-items-first-baseline
+/// @group align-items
+/// @contextType css
+
+/// This is equivalent to `align-items: last baseline;`.
+/// @example align-items: last baseline;
+/// @name .k-align-items-last-baseline
+/// @group align-items
+/// @contextType css
+
+/// This is equivalent to `align-items: self-start;`.
+/// @example align-items: self-start;
+/// @name .k-align-items-self-start
+/// @group align-items
+/// @contextType css
+
+/// This is equivalent to `align-items: self-end;`.
+/// @example align-items: self-end;
+/// @name .k-align-items-self-end
+/// @group align-items
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--align-items() {
 

package/scss/flex-grid/_align-self.scss

@@ -1,4 +1,80 @@
-// TODO: docs
+/// This is equivalent to `align-self: auto;`.
+/// @example align-self: auto;
+/// @name .k-align-self-auto
+/// @group align-self
+/// @contextType css
+
+/// This is equivalent to `align-self: normal;`.
+/// @example align-self: normal;
+/// @name .k-align-self-normal
+/// @group align-self
+/// @contextType css
+
+/// This is equivalent to `align-self: stretch;`.
+/// @example align-self: stretch;
+/// @name .k-align-self-stretch
+/// @group align-self
+/// @contextType css
+
+/// This is equivalent to `align-self: center;`.
+/// @example align-self: center;
+/// @name .k-align-self-center
+/// @group align-self
+/// @contextType css
+
+/// This is equivalent to `align-self: start;`.
+/// @example align-self: start;
+/// @name .k-align-self-start
+/// @group align-self
+/// @contextType css
+
+/// This is equivalent to `align-self: end;`.
+/// @example align-self: end;
+/// @name .k-align-self-end
+/// @group align-self
+/// @contextType css
+
+/// This is equivalent to `align-self: flex-start;`.
+/// @example align-self: flex-start;
+/// @name .k-align-self-flex-start
+/// @group align-self
+/// @contextType css
+
+/// This is equivalent to `align-self: flex-end;`.
+/// @example align-self: flex-end;
+/// @name .k-align-self-flex-end
+/// @group align-self
+/// @contextType css
+
+/// This is equivalent to `align-self: baseline;`.
+/// @example align-self: baseline;
+/// @name .k-align-self-baseline
+/// @group align-self
+/// @contextType css
+
+/// This is equivalent to `align-self: first baseline;`.
+/// @example align-self: first baseline;
+/// @name .k-align-self-first-baseline
+/// @group align-self
+/// @contextType css
+
+/// This is equivalent to `align-self: last baseline;`.
+/// @example align-self: last baseline;
+/// @name .k-align-self-last-baseline
+/// @group align-self
+/// @contextType css
+
+/// This is equivalent to `align-self: self-start;`.
+/// @example align-self: self-start;
+/// @name .k-align-self-self-start
+/// @group align-self
+/// @contextType css
+
+/// This is equivalent to `align-self: self-end;`.
+/// @example align-self: self-end;
+/// @name .k-align-self-self-end
+/// @group align-self
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--align-self() {
 

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

@@ -1,9 +1,11 @@
-/// This is equivalent to `flex-basis: auto`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It sizes the element according to its size property.
+/// This is equivalent to `flex-basis: auto;`.
+/// @example flex-basis: auto;
 /// @name .k-flex-basis-auto
 /// @group flex-basis
 /// @contextType css
 
-/// This is equivalent to `flex-basis: 0`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It disregards the element' size property.
+/// This is equivalent to `flex-basis: 0;`.
+/// @example flex-basis: 0;
 /// @name .k-flex-basis-0
 /// @group flex-basis
 /// @contextType css