@progress/kendo-theme-utils 6.2.1-dev.44 → 6.3.0

package/scss/border/_border-style.scss

@@ -1,4 +1,249 @@
-// TODO: docs
+/// This is equivalent to `border-style: solid;`.
+/// @example border-style: solid;
+/// @name .k-border-solid
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-style: dashed;`.
+/// @example border-style: dashed;
+/// @name .k-border-dashed
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-style: dotted;`.
+/// @example border-style: dotted;
+/// @name .k-border-dotted
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-style: double;`.
+/// @example border-style: double;
+/// @name .k-border-double
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-style: hidden;`.
+/// @example border-style: hidden;
+/// @name .k-border-hidden
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-style: none;`.
+/// @example border-style: none;
+/// @name .k-border-none
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-top-style: solid;`.
+/// @example border-top-style: solid;
+/// @name .k-border-t-solid
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-top-style: dashed;`.
+/// @example border-top-style: dashed;
+/// @name .k-border-t-dashed
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-top-style: dotted;`.
+/// @example border-top-style: dotted;
+/// @name .k-border-t-dotted
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-top-style: double;`.
+/// @example border-top-style: double;
+/// @name .k-border-t-double
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-top-style: hidden;`.
+/// @example border-top-style: hidden;
+/// @name .k-border-t-hidden
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-top-style: none;`.
+/// @example border-top-style: none;
+/// @name .k-border-t-none
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-right-style: solid;`.
+/// @example border-right-style: solid;
+/// @name .k-border-r-solid
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-right-style: dashed;`.
+/// @example border-right-style: dashed;
+/// @name .k-border-r-dashed
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-right-style: dotted;`.
+/// @example border-right-style: dotted;
+/// @name .k-border-r-dotted
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-right-style: double;`.
+/// @example border-right-style: double;
+/// @name .k-border-r-double
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-right-style: hidden;`.
+/// @example border-right-style: hidden;
+/// @name .k-border-r-hidden
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-right-style: none;`.
+/// @example border-right-style: none;
+/// @name .k-border-r-none
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-bottom-style: solid;`.
+/// @example border-bottom-style: solid;
+/// @name .k-border-b-solid
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-bottom-style: dashed;`.
+/// @example border-bottom-style: dashed;
+/// @name .k-border-b-dashed
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-bottom-style: dotted;`.
+/// @example border-bottom-style: dotted;
+/// @name .k-border-b-dotted
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-bottom-style: double;`.
+/// @example border-bottom-style: double;
+/// @name .k-border-b-double
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-bottom-style: hidden;`.
+/// @example border-bottom-style: hidden;
+/// @name .k-border-b-hidden
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-bottom-style: none;`.
+/// @example border-bottom-style: none;
+/// @name .k-border-b-none
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-left-style: solid;`.
+/// @example border-left-style: solid;
+/// @name .k-border-l-solid
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-left-style: dashed;`.
+/// @example border-left-style: dashed;
+/// @name .k-border-l-dashed
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-left-style: dotted;`.
+/// @example border-left-style: dotted;
+/// @name .k-border-l-dotted
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-left-style: double;`.
+/// @example border-left-style: double;
+/// @name .k-border-l-double
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-left-style: hidden;`.
+/// @example border-left-style: hidden;
+/// @name .k-border-l-hidden
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-inline-style: solid;`.
+/// @example border-inline-style: solid;
+/// @name .k-border-x-solid
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-inline-style: dashed;`.
+/// @example border-inline-style: dashed;
+/// @name .k-border-x-dashed
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-inline-style: dotted;`.
+/// @example border-inline-style: dotted;
+/// @name .k-border-x-dotted
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-inline-style: double;`.
+/// @example border-inline-style: double;
+/// @name .k-border-x-double
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-inline-style: hidden;`.
+/// @example border-inline-style: hidden;
+/// @name .k-border-x-hidden
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-inline-style: none;`.
+/// @example border-inline-style: none;
+/// @name .k-border-x-none
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-block-style: solid;`.
+/// @example border-block-style: solid;
+/// @name .k-border-y-solid
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-block-style: dashed;`.
+/// @example border-block-style: dashed;
+/// @name .k-border-y-dashed
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-block-style: dotted;`.
+/// @example border-block-style: dotted;
+/// @name .k-border-y-dotted
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-block-style: double;`.
+/// @example border-block-style: double;
+/// @name .k-border-y-double
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-block-style: hidden;`.
+/// @example border-block-style: hidden;
+/// @name .k-border-y-hidden
+/// @group border-style
+/// @contextType css
+
+/// This is equivalent to `border-block-style: none;`.
+/// @example border-block-style: none;
+/// @name .k-border-y-none
+/// @group border-style
+/// @contextType css
+
 
 @mixin kendo-utils--border--border-style() {
 

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

@@ -1,4 +1,14 @@
-// TODO: docs
+/// 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() {
 

package/scss/filter/_backdrop.scss

@@ -1,4 +1,32 @@
-// TODO: docs
+/// 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() {