* utilities: change utilities and update example in dev page.

lib/utilities/src/backgrounds/background-opacity.css

@@ -1,4 +1,5 @@
 .bg-opacity-0   {--tw-bg-opacity: 0;}
+.bg-opacity-5   {--tw-bg-opacity: .05;}
 .bg-opacity-10  {--tw-bg-opacity: .1;}
 .bg-opacity-20  {--tw-bg-opacity: .2;}
 .bg-opacity-30  {--tw-bg-opacity: .3;}

lib/utilities/src/backgrounds/background.css

@@ -1,33 +1,61 @@
-.bg-primary   {@apply -bg-primary-500;}
-.bg-secondary {@apply -bg-secondary-500;}
-.bg-success   {@apply -bg-success-500;}
-.bg-warning   {@apply -bg-warning-500;}
-.bg-danger    {@apply -bg-danger-500;}
-.bg-important {@apply -bg-important-500;}
-.bg-special   {@apply -bg-special-500;}
+.bg-primary     {@apply -bg-primary-500;}
+.bg-secondary   {@apply -bg-secondary-500;}
+.bg-success     {@apply -bg-success-500;}
+.bg-warning     {@apply -bg-warning-500;}
+.bg-danger      {@apply -bg-danger-500;}
+.bg-important   {@apply -bg-important-500;}
+.bg-special     {@apply -bg-special-500;}
 
-.bg-primary-pale   {@apply -bg-primary-100;}
-.bg-secondary-pale {@apply -bg-secondary-100;}
-.bg-success-pale   {@apply -bg-success-100;}
-.bg-warning-pale   {@apply -bg-warning-100;}
-.bg-danger-pale    {@apply -bg-danger-100;}
-.bg-important-pale {@apply -bg-important-100;}
-.bg-special-pale   {@apply -bg-special-100;}
+.bg-primary-50     {@apply -bg-primary-50;}
+.bg-primary-100    {@apply -bg-primary-100;}
+.bg-primary-200    {@apply -bg-primary-200;}
+.bg-primary-300    {@apply -bg-primary-300;}
+.bg-primary-400    {@apply -bg-primary-400;}
+.bg-primary-500    {@apply -bg-primary-500;}
+.bg-primary-600    {@apply -bg-primary-600;}
+.bg-primary-700    {@apply -bg-primary-700;}
+.bg-primary-800    {@apply -bg-primary-800;}
+.bg-primary-900    {@apply -bg-primary-900;}
+.bg-primary-950    {@apply -bg-primary-950;}
 
-.bg-white   {@apply -bg-white;}
-.bg-lighter {@apply -bg-gray-300;}
-.bg-light   {@apply -bg-gray-400;}
-.bg-gray    {@apply -bg-gray-500;}
-.bg-dark    {@apply -bg-gray-600;}
-.bg-darken  {@apply -bg-gray-700;}
-.bg-darker  {@apply -bg-gray-900;}
-.bg-black   {@apply -bg-black;}
+.bg-secondary-50     {@apply -bg-secondary-50;}
+.bg-secondary-100    {@apply -bg-secondary-100;}
+.bg-secondary-200    {@apply -bg-secondary-200;}
+.bg-secondary-300    {@apply -bg-secondary-300;}
+.bg-secondary-400    {@apply -bg-secondary-400;}
+.bg-secondary-500    {@apply -bg-secondary-500;}
+.bg-secondary-600    {@apply -bg-secondary-600;}
+.bg-secondary-700    {@apply -bg-secondary-700;}
+.bg-secondary-800    {@apply -bg-secondary-800;}
+.bg-secondary-900    {@apply -bg-secondary-900;}
+.bg-secondary-950    {@apply -bg-secondary-950;}
 
-.bg-canvas  {@apply -bg-canvas;}
-.bg-surface {@apply -bg-surface;}
-.bg-inverse {@apply -bg-fore;}
+.bg-gray-50   {@apply -bg-gray-50}
+.bg-gray-100  {@apply -bg-gray-100}
+.bg-gray-200  {@apply -bg-gray-200}
+.bg-gray-300  {@apply -bg-gray-300}
+.bg-gray-400  {@apply -bg-gray-400}
+.bg-gray-500,
+.bg-gray      {@apply -bg-gray-500}
+.bg-gray-600  {@apply -bg-gray-600}
+.bg-gray-700  {@apply -bg-gray-700}
+.bg-gray-800  {@apply -bg-gray-800}
+.bg-gray-900  {@apply -bg-gray-900}
+.bg-gray-950  {@apply -bg-gray-950}
 
-.bg-transparent {background-color: transparent;}
-.bg-inherit     {background-color: inherit;}
-.bg-none        {background: none;}
-.bg-current     {background: currentColor;}
+.bg-canvas            {@apply -bg-canvas;}
+.bg-surface-light     {@apply -bg-surface-light;}
+.bg-surface           {@apply -bg-surface;}
+.bg-surface-strong    {@apply -bg-surface-strong;}
+.bg-inverse           {@apply -bg-inverse;}
+.bg-fore-in-light     {@apply -bg-fore-in-light;}
+.bg-fore-in-dark      {@apply -bg-fore-in-dark;}
+.bg-fore              {@apply -bg-fore;}
+.bg-focus             {@apply -bg-focus;}
+
+.bg-white       {@apply -bg-white;}
+.bg-black       {@apply -bg-black;}
+.bg-transparent {@apply -bg-transparent;}
+.bg-current     {@apply -bg-current;}
+.bg-inherit     {@apply -bg-inherit;}
+.bg-none        {@apply -bg-none;}

lib/utilities/src/borders/border-color.css

@@ -1,3 +1,6 @@
+.border-light   {@apply -border-border-light;}
+.border-strong  {@apply -border-border-strong;}
+
 .border-primary   {@apply -border-primary-500;}
 .border-secondary {@apply -border-secondary-500;}
 .border-success   {@apply -border-success-500;}
@@ -6,19 +9,32 @@
 .border-important {@apply -border-important-500;}
 .border-special   {@apply -border-special-500;}
 
-.border-strong  {@apply -border-border-strong;}
-.border-white   {@apply -border-white;}
-.border-lighter {@apply -border-gray-100;}
-.border-light   {@apply -border-gray-300;}
-.border-gray    {@apply -border-gray-500;}
-.border-darken  {@apply -border-gray-700;}
-.border-darker  {@apply -border-gray-900;}
-.border-black   {@apply -border-black;}
-.border-default {@apply -border-border;}
+.border-gray-50   {@apply -border-gray-50}
+.border-gray-100  {@apply -border-gray-100}
+.border-gray-200  {@apply -border-gray-200}
+.border-gray-300  {@apply -border-gray-300}
+.border-gray-400  {@apply -border-gray-400}
+.border-gray-500,
+.border-gray      {@apply -border-gray-500}
+.border-gray-600  {@apply -border-gray-600}
+.border-gray-700  {@apply -border-gray-700}
+.border-gray-800  {@apply -border-gray-800}
+.border-gray-900  {@apply -border-gray-900}
+.border-gray-950  {@apply -border-gray-950}
 
-.border-canvas  {@apply -border-canvas;}
-.border-surface {@apply -border-surface;}
-.border-inverse {@apply -border-fore;}
+.border-white             {@apply -border-white;}
+.border-black             {@apply -border-black;}
+.border-canvas            {@apply -border-canvas;}
+.border-surface-light     {@apply -border-surface-light;}
+.border-surface           {@apply -border-surface;}
+.border-surface-strong    {@apply -border-surface-strong;}
+.border-inverse           {@apply -border-inverse;}
+.border-fore-in-light     {@apply -border-fore-in-light;}
+.border-fore-in-dark      {@apply -border-fore-in-dark;}
+.border-fore              {@apply -border-fore;}
+.border-focus             {@apply -border-focus;}
+.border-link              {@apply -border-link;}
+.border-link-hover        {@apply -border-link-hover;}
 
 .border-transparent {border-color: transparent;}
 .border-current     {border-color: currentColor;}

lib/utilities/src/borders/border-opacity.css

@@ -1,4 +1,5 @@
 .border-opacity-0   {--tw-border-opacity: 0;}
+.border-opacity-5   {--tw-border-opacity: .05;}
 .border-opacity-10  {--tw-border-opacity: .1;}
 .border-opacity-20  {--tw-border-opacity: .2;}
 .border-opacity-30  {--tw-border-opacity: .3;}

lib/utilities/src/borders/border-width.css

@@ -1,23 +1,24 @@
+.border-0     {@apply -border-0;}
 .border       {@apply -border;}
+.border-2     {@apply -border-2;}
+.border-4     {@apply -border-4;}
+
 .border-t     {@apply -border-t;}
 .border-l     {@apply -border-l;}
 .border-r     {@apply -border-r;}
 .border-b     {@apply -border-b;}
 
-.border-2     {@apply -border-2;}
+.border-t-0   {@apply -border-t-0;}
+.border-r-0   {@apply -border-r-0;}
+.border-b-0   {@apply -border-b-0;}
+.border-l-0   {@apply -border-l-0;}
+
 .border-t-2   {@apply -border-t-2;}
 .border-l-2   {@apply -border-l-2;}
 .border-r-2   {@apply -border-r-2;}
 .border-b-2   {@apply -border-b-2;}
 
-.border-4     {@apply -border-4;}
 .border-t-4   {@apply -border-t-4;}
 .border-l-4   {@apply -border-l-4;}
 .border-r-4   {@apply -border-r-4;}
 .border-b-4   {@apply -border-b-4;}
-
-.border-0   {@apply -border-0;}
-.border-t-0 {@apply -border-t-0;}
-.border-r-0 {@apply -border-r-0;}
-.border-b-0 {@apply -border-b-0;}
-.border-l-0 {@apply -border-l-0;}

lib/utilities/src/borders/ring.css

@@ -1,13 +1,11 @@
-.ring       {@apply -ring-1 -ring-border-strong;}
-.ring-0     {@apply -ring-0;}
-.ring-2     {@apply -ring-2;}
-.ring-3     {@apply -ring;}
-.ring-4     {@apply -ring-4;}
-.ring-8     {@apply -ring-8;}
-.ring-inset {@apply -ring-inset;}
+.ring         {@apply -ring-1 -ring-border;}
+
+.ring-border-light   {@apply -ring-border-light;}
+.ring-border         {@apply -ring-border;}
+.ring-border-strong  {@apply -ring-border-strong;}
 
-.ring-inverse {@apply -ring-inverse;}
 .ring-light   {@apply -ring-inverse -ring-opacity-5;}
+.ring-gray    {@apply -ring-inverse -ring-opacity-10;}
 .ring-dark    {@apply -ring-inverse -ring-opacity-20;}
 .ring-darker  {@apply -ring-inverse -ring-opacity-30;}
 .ring-darkest {@apply -ring-inverse -ring-opacity-50;}
@@ -20,12 +18,16 @@
 .ring-important   {@apply -ring-important-500;}
 .ring-special     {@apply -ring-special-500;}
 
-.ring-inherit     {@apply -ring-inherit;}
-.ring-current     {@apply -ring-current;}
-.ring-transparent {@apply -ring-transparent;}
-.ring-canvas      {@apply -ring-canvas;}
-.ring-black       {@apply -ring-black;}
-.ring-white       {@apply -ring-white;}
+.ring-inverse      {@apply -ring-inverse;}
+.ring-canvas       {@apply -ring-canvas;}
+.ring-surface      {@apply -ring-surface;}
+.ring-fore         {@apply -ring-fore;}
+.ring-black        {@apply -ring-black;}
+.ring-white        {@apply -ring-white;}
+
+.ring-inherit      {@apply -ring-inherit;}
+.ring-current      {@apply -ring-current;}
+.ring-transparent  {@apply -ring-transparent;}
 
 .ring-opacity-0   {--tw-ring-opacity: 0;}
 .ring-opacity-5   {--tw-ring-opacity: .05;}
@@ -40,6 +42,14 @@
 .ring-opacity-90  {--tw-ring-opacity: .9;}
 .ring-opacity-100 {--tw-ring-opacity: 1;}
 
+.ring-0     {@apply -ring-0;}
+.ring-2     {@apply -ring-2;}
+.ring-3     {@apply -ring;}
+.ring-4     {@apply -ring-4;}
+.ring-8     {@apply -ring-8;}
+
+.ring-inset {@apply -ring-inset;}
+
 .ring-offset-0   {@apply -ring-offset-0}
 .ring-offset-1   {@apply -ring-offset-1}
 .ring-offset-2   {@apply -ring-offset-2}

lib/utilities/src/borders/rounded.css

@@ -6,7 +6,7 @@
 .rounded-xl    {@apply -rounded-xl;}
 .rounded-2xl   {@apply -rounded-2xl;}
 .rounded-3xl   {@apply -rounded-3xl;}
-.circle,
+.circle,       /* .circle is deprecated. */
 .rounded-full  {@apply -rounded-full;}
 
 .rounded-l-none  {@apply -rounded-l-none;}

lib/utilities/src/effects/shadow-color.css

@@ -6,14 +6,27 @@
 .shadow-important {@apply -shadow-important-500;}
 .shadow-special   {@apply -shadow-special-500;}
 
-.shadow-white   {@apply -shadow-white;}
-.shadow-lighter {@apply -shadow-gray-100;}
-.shadow-light   {@apply -shadow-gray-300;}
-.shadow-gray    {@apply -shadow-gray-500;}
-.shadow-dark    {@apply -shadow-gray-700;}
-.shadow-darker  {@apply -shadow-gray-900;}
-.shadow-black   {@apply -shadow-black;}
+.shadow-gray-50   {@apply -shadow-gray-50}
+.shadow-gray-100  {@apply -shadow-gray-100}
+.shadow-gray-200  {@apply -shadow-gray-200}
+.shadow-gray-300  {@apply -shadow-gray-300}
+.shadow-gray-400  {@apply -shadow-gray-400}
+.shadow-gray-500,
+.shadow-gray      {@apply -shadow-gray-500}
+.shadow-gray-600  {@apply -shadow-gray-600}
+.shadow-gray-700  {@apply -shadow-gray-700}
+.shadow-gray-800  {@apply -shadow-gray-800}
+.shadow-gray-900  {@apply -shadow-gray-900}
+.shadow-gray-950  {@apply -shadow-gray-950}
 
+.shadow-canvas            {@apply -shadow-canvas;}
+.shadow-surface           {@apply -shadow-surface;}
+.shadow-inverse           {@apply -shadow-inverse;}
+.shadow-fore              {@apply -shadow-fore;}
+.shadow-focus             {@apply -shadow-focus;}
+
+.shadow-white       {@apply -shadow-white;}
+.shadow-black       {@apply -shadow-black;}
 .shadow-transparent {@apply -shadow-transparent;}
 .shadow-current     {@apply -shadow-current;}
 .shadow-inherit     {@apply -shadow-inherit;}

lib/utilities/src/typography/text-color.css

@@ -6,28 +6,8 @@
 .text-important   {@apply -text-important-500;}
 .text-special     {@apply -text-special-500;}
 
-.text-white       {@apply -text-white;}
-.text-lighter     {@apply -text-gray-300;}
-.text-light       {@apply -text-gray-400;}
-.text-gray        {@apply -text-gray-500;}
-.text-dark        {@apply -text-gray-600;}
-.text-darken      {@apply -text-gray-700;}
-.text-darker      {@apply -text-gray-900;}
-.text-black       {@apply -text-black;}
-
-.text-canvas      {@apply -text-canvas;}
-.text-surface     {@apply -text-surface;}
-.text-inverse     {@apply -text-inverse;}
-.text-fore        {@apply -text-fore;}
-.text-focus       {@apply -text-focus;}
-.text-link        {@apply -text-link;}
-.text-link-hover  {@apply -text-link-hover;}
-
-.text-transparent {color: transparent;}
-.text-current     {color: currentColor;}
-.text-inherit     {color: inherit;}
-
 .text-primary-50     {@apply -text-primary-50;}
+.text-primary-100    {@apply -text-primary-100;}
 .text-primary-200    {@apply -text-primary-200;}
 .text-primary-300    {@apply -text-primary-300;}
 .text-primary-400    {@apply -text-primary-400;}
@@ -36,8 +16,10 @@
 .text-primary-700    {@apply -text-primary-700;}
 .text-primary-800    {@apply -text-primary-800;}
 .text-primary-900    {@apply -text-primary-900;}
+.text-primary-950    {@apply -text-primary-950;}
 
 .text-secondary-50     {@apply -text-secondary-50;}
+.text-secondary-100    {@apply -text-secondary-100;}
 .text-secondary-200    {@apply -text-secondary-200;}
 .text-secondary-300    {@apply -text-secondary-300;}
 .text-secondary-400    {@apply -text-secondary-400;}
@@ -46,3 +28,35 @@
 .text-secondary-700    {@apply -text-secondary-700;}
 .text-secondary-800    {@apply -text-secondary-800;}
 .text-secondary-900    {@apply -text-secondary-900;}
+.text-secondary-950    {@apply -text-secondary-950;}
+
+.text-gray-50   {@apply -text-gray-50}
+.text-gray-100  {@apply -text-gray-100}
+.text-gray-200  {@apply -text-gray-200}
+.text-gray-300  {@apply -text-gray-300}
+.text-gray-400  {@apply -text-gray-400}
+.text-gray-500,
+.text-gray      {@apply -text-gray-500}
+.text-gray-600  {@apply -text-gray-600}
+.text-gray-700  {@apply -text-gray-700}
+.text-gray-800  {@apply -text-gray-800}
+.text-gray-900  {@apply -text-gray-900}
+.text-gray-950  {@apply -text-gray-950}
+
+.text-white             {@apply -text-white;}
+.text-black             {@apply -text-black;}
+.text-canvas            {@apply -text-canvas;}
+.text-surface-light     {@apply -text-surface-light;}
+.text-surface           {@apply -text-surface;}
+.text-surface-strong    {@apply -text-surface-strong;}
+.text-inverse           {@apply -text-inverse;}
+.text-fore-in-light     {@apply -text-fore-in-light;}
+.text-fore-in-dark      {@apply -text-fore-in-dark;}
+.text-fore              {@apply -text-fore;}
+.text-focus             {@apply -text-focus;}
+.text-link              {@apply -text-link;}
+.text-link-hover        {@apply -text-link-hover;}
+
+.text-transparent {@apply -text-transparent;}
+.text-current     {@apply -text-current;}
+.text-inherit     {@apply -text-inherit;}