* utilities: refactor gray helpers.

easysoft · Dec 15, 2023 · 5ca4748 · 5ca4748
1 parent b442763
commit 5ca4748
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 103 deletions.
diff --git a/lib/utilities/README.md b/lib/utilities/README.md
@@ -43,6 +43,7 @@
 #### Accent
 
 ```html:example: blocks
+<div class="primary"></div>
 <div class="secondary"></div>
 <div class="success"></div>
 <div class="warning"></div>
@@ -62,25 +63,31 @@
 #### Grays
 
 ```html:example: blocks
-<div class="bright"></div>
-<div class="lightest"></div>
-<div class="lighter"></div>
-<div class="light-gray"></div>
+<div class="gray-50"></div>
+<div class="gray-100"></div>
+<div class="gray-200"></div>
+<div class="gray-300"></div>
+<div class="gray-400"></div>
 <div class="gray"></div>
-<div class="dark-gray"></div>
-<div class="darker"></div>
-<div class="darkest"></div>
-<div class="inky"></div>
+<div class="gray-500"></div>
+<div class="gray-600"></div>
+<div class="gray-700"></div>
+<div class="gray-800"></div>
+<div class="gray-900"></div>
+<div class="gray-950"></div>
 <hr>
-<div class="bright state"></div>
-<div class="lightest state"></div>
-<div class="lighter state"></div>
-<div class="light-gray state"></div>
+<div class="gray-50 state"></div>
+<div class="gray-100 state"></div>
+<div class="gray-200 state"></div>
+<div class="gray-300 state"></div>
+<div class="gray-400 state"></div>
 <div class="gray state"></div>
-<div class="dark-gray state"></div>
-<div class="darker state"></div>
-<div class="darkest state"></div>
-<div class="inky state"></div>
+<div class="gray-500 state"></div>
+<div class="gray-600 state"></div>
+<div class="gray-700 state"></div>
+<div class="gray-800 state"></div>
+<div class="gray-900 state"></div>
+<div class="gray-950 state"></div>
 ```
 
 ### Ghost
@@ -118,9 +125,7 @@
 <div class="important-outline"></div>
 <div class="special-outline"></div>
 <h4>Grays</h4>
-<div class="light-gray-outline"></div>
 <div class="gray-outline"></div>
-<div class="dark-gray-outline"></div>
 <hr>
 <h4>Accent State</h4>
 <div class="outline state"></div>
@@ -132,9 +137,7 @@
 <div class="important-outline state"></div>
 <div class="special-outline state"></div>
 <h4>Grays State</h4>
-<div class="light-gray-outline state"></div>
 <div class="gray-outline state"></div>
-<div class="dark-gray-outline state"></div>
 ```
 
 ### Pale
@@ -149,15 +152,18 @@
 <div class="important-pale"></div>
 <div class="special-pale"></div>
 <h4>Grays</h4>
-<div class="bright-pale"></div>
-<div class="lightest-pale"></div>
-<div class="lighter-pale"></div>
-<div class="light-gray-pale"></div>
+<div class="gray-50-pale"></div>
+<div class="gray-100-pale"></div>
+<div class="gray-200-pale"></div>
+<div class="gray-300-pale"></div>
+<div class="gray-400-pale"></div>
 <div class="gray-pale"></div>
-<div class="dark-gray-pale"></div>
-<div class="darker-pale"></div>
-<div class="darkest-pale"></div>
-<div class="inky-pale"></div>
+<div class="gray-500-pale"></div>
+<div class="gray-600-pale"></div>
+<div class="gray-700-pale"></div>
+<div class="gray-800-pale"></div>
+<div class="gray-900-pale"></div>
+<div class="gray-950-pale"></div>
 <hr>
 <h4>Accent State</h4>
 <div class="primary-pale state"></div>
@@ -168,40 +174,55 @@
 <div class="important-pale state"></div>
 <div class="special-pale state"></div>
 <h4>Grays State</h4>
-<div class="bright-pale state"></div>
-<div class="lightest-pale state"></div>
-<div class="lighter-pale state"></div>
-<div class="light-gray-pale state"></div>
+<div class="gray-50-pale state"></div>
+<div class="gray-100-pale state"></div>
+<div class="gray-200-pale state"></div>
+<div class="gray-300-pale state"></div>
+<div class="gray-400-pale state"></div>
 <div class="gray-pale state"></div>
-<div class="dark-gray-pale state"></div>
-<div class="darker-pale state"></div>
-<div class="darkest-pale state"></div>
-<div class="inky-pale state"></div>
+<div class="gray-500-pale state"></div>
+<div class="gray-600-pale state"></div>
+<div class="gray-700-pale state"></div>
+<div class="gray-800-pale state"></div>
+<div class="gray-900-pale state"></div>
+<div class="gray-950-pale state"></div>
 ```
 
-## Text Colors
+## Typography
+
+### Text Colors
 
 ```html:example: blocks
+<h4>Accent</h4>
 <div class="text-primary"></div>
 <div class="text-secondary"></div>
 <div class="text-success"></div>
 <div class="text-warning"></div>
 <div class="text-danger"></div>
 <div class="text-important"></div>
 <div class="text-special"></div>
-
-<div class="text-white"></div>
+<h4>Grays</h4>
+<div class="text-bright"></div>
+<div class="text-lightest"></div>
 <div class="text-lighter"></div>
-<div class="text-light"></div>
+<div class="text-light-gray"></div>
 <div class="text-gray"></div>
-<div class="text-dark"></div>
+<div class="text-dark-gray"></div>
 <div class="text-darker"></div>
+<div class="text-darkest"></div>
+<div class="text-inky"></div>
+<h4>Surface</h4>
 <div class="text-black"></div>
-
+<div class="text-white"></div>
+<div class="text-fore"></div>
+<div class="text-fore-in-light"></div>
+<div class="text-fore-in-dark"></div>
 <div class="text-canvas"></div>
+<div class="text-surface-light"></div>
 <div class="text-surface"></div>
-<div class="text-inverse"><span class="text-white"></span></div>
-<div class="text-current"><span class="text-white"></span></div>
+<div class="text-surface-strong"></div>
+<div class="text-inverse"></div>
+<div class="text-current"></div>
 <div class="text-inherit"></div>
 <div class="text-transparent"></div>
 ```

diff --git a/lib/utilities/src/skin/outline.css b/lib/utilities/src/skin/outline.css
@@ -6,9 +6,7 @@
 .danger-outline,
 .important-outline,
 .special-outline,
-.light-gray-outline,
-.gray-outline,
-.dark-gray-outline {
+.gray-outline {
   @apply -skin;
   --skin-text: var(--skin-color, inherit);
   --skin-bg: transparent;
@@ -41,12 +39,6 @@
   --skin-outline-rgb: var(--color-special-500-rgb);
 }
 
-.light-gray-outline {
-  --skin-outline-rgb: var(--color-gray-400-rgb);
-}
 .gray-outline {
   --skin-outline-rgb: var(--color-gray-500-rgb);
 }
-.dark-gray-outline {
-  --skin-outline-rgb: var(--color-gray-600-rgb);
-}
diff --git a/lib/utilities/src/skin/pale.css b/lib/utilities/src/skin/pale.css
@@ -6,15 +6,17 @@
 .danger-pale,
 .important-pale,
 .special-pale,
-.bright-pale,
-.lightest-pale,
-.lighter-pale,
-.light-gray-pale,
-.gray-pale,
-.dark-gray-pale,
-.darker-pale,
-.darkest-pale,
-.inky-pale {
+.gray-50-pale,
+.gray-100-pale,
+.gray-200-pale,
+.gray-300-pale,
+.gray-400-pale,
+.gray-500-pale, .gray-pale,
+.gray-600-pale,
+.gray-700-pale,
+.gray-800-pale,
+.gray-900-pale,
+.gray-950-pale {
   @apply -skin;
 
   --skin-color: rgba(var(--skin-pale-rgb), .1);
@@ -46,34 +48,41 @@
   --skin-pale-rgb: var(--color-special-500-rgb);
 }
 
-.bright-pale {
+.gray-50-pale {
+  --skin-pale-rgb: var(--color-gray-50-rgb);
+  --skin-text: var(--color-gray-400);
+}
+.gray-100-pale {
   --skin-pale-rgb: var(--color-gray-100-rgb);
-  --skin-text: var(--color-gray-400-rgb);
+  --skin-text: var(--color-gray-400);
 }
-.lightest-pale {
+.gray-200-pale {
   --skin-pale-rgb: var(--color-gray-200-rgb);
-  --skin-text: var(--color-gray-400-rgb);
+  --skin-text: var(--color-gray-400);
 }
-.lighter-pale {
+.gray-300-pale {
   --skin-pale-rgb: var(--color-gray-300-rgb);
-  --skin-text: var(--color-gray-500-rgb);
+  --skin-text: var(--color-gray-500);
 }
-.light-gray-pale {
+.gray-400-pale {
   --skin-pale-rgb: var(--color-gray-400-rgb);
-  --skin-text: var(--color-gray-500-rgb);
+  --skin-text: var(--color-gray-500);
 }
-.gray-pale {
+.gray-500-pale, .gray-pale {
   --skin-pale-rgb: var(--color-gray-500-rgb);
 }
-.dark-gray-pale {
+.gray-600-pale {
   --skin-pale-rgb: var(--color-gray-600-rgb);
 }
-.darker-pale {
+.gray-700-pale {
   --skin-pale-rgb: var(--color-gray-700-rgb);
 }
-.darkest-pale {
+.gray-800-pale {
   --skin-pale-rgb: var(--color-gray-800-rgb);
 }
-.inky-pale {
+.gray-900-pale {
   --skin-pale-rgb: var(--color-gray-900-rgb);
 }
+.gray-950-pale {
+  --skin-pale-rgb: var(--color-gray-950-rgb);
+}
diff --git a/lib/utilities/src/skin/solid.css b/lib/utilities/src/skin/solid.css
@@ -5,17 +5,17 @@
 .danger,
 .important,
 .special,
-.bright,
-.lightest,
-.lighter,
-.lighten,   /* .lighten is deprecated */
-.light-gray,
-.gray,
-.darken, /* .darken is deprecated */
-.dark-gray,
-.darker,
-.darkest,
-.inky {
+.gray-50,
+.gray-100,
+.gray-200,
+.gray-300,
+.gray-400, .lighten, /* .lighten is deprecated */
+.gray-500, .gray,
+.gray-600, .darken, /* .darken is deprecated */
+.gray-700,
+.gray-800,
+.gray-900,
+.gray-950 {
   @apply -skin;
   --skin-text: var(--color-fore-in-dark);
   --state-ring-color: var(--skin-color);
@@ -43,38 +43,41 @@
   --skin-color: var(--color-special-500);
 }
 
-.bright {
+.gray-50 {
+  --skin-bg: var(--color-gray-50);
+  --skin-text: var(--color-fore);
+}
+.gray-100 {
   --skin-color: var(--color-gray-100);
   --skin-text: var(--color-fore);
-  --state-ring-color: var(--skin-text);
 }
-.lightest {
+.gray-200 {
   --skin-color: var(--color-gray-200);
   --skin-text: var(--color-fore);
-  --state-ring-color: var(--skin-text);
 }
-.lighter {
+.gray-300 {
   --skin-color: var(--color-gray-300);
   --skin-text: var(--color-fore);
-  --state-ring-color: var(--skin-text);
 }
-.light-gray,
-.lighten /* .lighten is deprecated */ {
+.gray-400, .lighten {
   --skin-color: var(--color-gray-400);
+  --skin-text: var(--color-fore);
 }
-.gray {
+.gray-500, .gray {
   --skin-color: var(--color-gray-500);
 }
-.dark-gray,
-.darken /* .darken is deprecated */ {
+.gray-600, .darken {
   --skin-color: var(--color-gray-600);
 }
-.darker {
+.gray-700 {
   --skin-color: var(--color-gray-700);
 }
-.darkest {
+.gray-800 {
   --skin-color: var(--color-gray-800);
 }
-.inky {
+.gray-900 {
   --skin-color: var(--color-gray-900);
 }
+.gray-950 {
+  --skin-color: var(--color-gray-950);
+}
diff --git a/lib/utilities/src/skin/surface.css b/lib/utilities/src/skin/surface.css
@@ -8,13 +8,13 @@
   @apply -bg-canvas;
 }
 .surface-light {
-  @apply -bg-surface-light;
+  @apply -bg-surface-light -ring-surface-light;
 }
 .surface {
-  @apply -bg-surface;
+  @apply -bg-surface -ring-surface;
 }
 .surface-strong {
-  @apply -bg-surface-strong;
+  @apply -bg-surface-strong -ring-surface-strong;
 }
 .inverse {
   @apply -bg-inverse -text-canvas;