* utilities: refactor skin helper.

lib/utilities/README.md

@@ -34,14 +34,15 @@
 <div class="surface"></div>
 <div class="surface-strong"></div>
 <div class="inverse"></div>
+<div class="white"></div>
+<div class="black"></div>
 ```
 
 ### Solid
 
 #### Accent
 
 ```html:example: blocks
-<div class="primary"></div>
 <div class="secondary"></div>
 <div class="success"></div>
 <div class="warning"></div>
@@ -61,7 +62,6 @@
 #### Grays
 
 ```html:example: blocks
-<div class="white"></div>
 <div class="bright"></div>
 <div class="lightest"></div>
 <div class="lighter"></div>
@@ -71,9 +71,7 @@
 <div class="darker"></div>
 <div class="darkest"></div>
 <div class="inky"></div>
-<div class="black"></div>
 <hr>
-<div class="white state"></div>
 <div class="bright state"></div>
 <div class="lightest state"></div>
 <div class="lighter state"></div>
@@ -83,7 +81,6 @@
 <div class="darker state"></div>
 <div class="darkest state"></div>
 <div class="inky state"></div>
-<div class="black state"></div>
 ```
 
 ### Ghost
@@ -161,7 +158,6 @@
 <div class="darker-pale"></div>
 <div class="darkest-pale"></div>
 <div class="inky-pale"></div>
-<div class="black-pale"></div>
 <hr>
 <h4>Accent State</h4>
 <div class="primary-pale state"></div>
@@ -181,7 +177,6 @@
 <div class="darker-pale state"></div>
 <div class="darkest-pale state"></div>
 <div class="inky-pale state"></div>
-<div class="black-pale state"></div>
 ```
 
 ## Text Colors

lib/utilities/src/interactivity/state.css

@@ -12,22 +12,27 @@
         transform: scale(var(--state-scale));
         transition-property: opacity, transform, box-shadow;
     }
-    .-state:hover::before,
-    .-state:active::before,
-    .-state:focus-visible::before {
-        @apply -opacity-100 -scale-100;
-    }
     .-state:focus-visible {
         @apply -outline-none;
     }
+    .-state:hover::before,
+    .-state:active::before,
     .-state:focus-visible::before {
-        background: var(--state-focus-color);
-        @apply -ring -ring-focus;
+        @apply -scale-100;
+    }
+    .-state:hover::before {
+        opacity: var(--state-hover-opacity, 1);
     }
     .-state:active::before {
-        background: var(--state-active-color);
+        background: var(--state-active-color, var(--state-color));
+        opacity: var(--state-active-opacity, .6);
         --tw-ring-color: var(--state-ring-color, currentColor);
-        @apply -ring -duration-700 -opacity-80;
+        @apply -ring -duration-700;
+    }
+    .-state:focus-visible::before {
+        background: var(--state-focus-color, var(--state-color));
+        opacity: var(--state-focus-opacity, 1);
+        @apply -ring -ring-focus;
     }
     .-state[disabled]::before,
     .-state.disabled::before {

lib/utilities/src/main.ts

@@ -3,7 +3,7 @@ import './interactivity/index.css';
 import './layout/index.css';
 import './spacing/index.css';
 import './sizing/index.css';
-import './skin';
+import './skin/index.css';
 import './typography/index.css';
 import './backgrounds/index.css';
 import './borders/index.css';

lib/utilities/src/skin/ghost.css

@@ -7,34 +7,37 @@
 .important-ghost,
 .special-ghost {
   @apply -skin;
-  --skin-ring-opacity: 0;
+  --tw-ring-opacity: 0;
   --tw-bg-opacity: 0;
-  --skin-text: var(--skin-color, var(--color-fore-rgb));
-  --skin-hover-bg: var(--skin-color);
-  --skin-hover-bg-opacity: .1;
-  --state-color: transparent;
+  --skin-text: var(--skin-color, inherit);
+  --skin-bg: transparent;
+  --skin-ring: transparent;
+
+  --skin-color: rgba(var(--skin-ghost-rgb), 1);
+  --state-color: rgba(var(--skin-ghost-rgb), .1);
 }
 .ghost {
-  --skin-hover-bg: var(--color-gray-500-rgb);
+  --skin-ghost-rgb: var(--color-fore-rgb);
+  --skin-text: inherit;
 }
 .primary-ghost {
-  --skin-color: var(--color-primary-500-rgb);
+  --skin-ghost-rgb: var(--color-primary-500-rgb);
 }
 .secondary-ghost {
-  --skin-color: var(--color-secondary-500-rgb);
+  --skin-ghost-rgb: var(--color-secondary-500-rgb);
 }
 .success-ghost {
-  --skin-color: var(--color-success-500-rgb);
+  --skin-ghost-rgb: var(--color-success-500-rgb);
 }
 .warning-ghost {
-  --skin-color: var(--color-warning-500-rgb);
+  --skin-ghost-rgb: var(--color-warning-500-rgb);
 }
 .danger-ghost {
-  --skin-color: var(--color-danger-500-rgb);
+  --skin-ghost-rgb: var(--color-danger-500-rgb);
 }
 .important-ghost {
-  --skin-color: var(--color-important-500-rgb);
+  --skin-ghost-rgb: var(--color-important-500-rgb);
 }
 .special-ghost {
-  --skin-color: var(--color-special-500-rgb);
+  --skin-ghost-rgb: var(--color-special-500-rgb);
 }

lib/utilities/src/skin/index.css

@@ -0,0 +1,6 @@
+@import './surface.css';
+@import './skin.css';
+@import './solid.css';
+@import './pale.css';
+@import './outline.css';
+@import './ghost.css';

lib/utilities/src/skin/outline.css

@@ -6,58 +6,47 @@
 .danger-outline,
 .important-outline,
 .special-outline,
-.white-outline,
-.bright-outline,
-.lightest-outline,
-.lighter-outline,
 .light-gray-outline,
 .gray-outline,
-.dark-gray-outline,
-.darker-outline,
-.darkest-outline,
-.inky-outline,
-.black-outline {
+.dark-gray-outline {
   @apply -skin;
-  --tw-bg-opacity: 0.01;
-  --tw-ring-color: currentColor;
-  --skin-ring-opacity: 1;
-  --skin-text: var(--skin-color);
-  --skin-bg: var(--skin-color);
-  --skin-hover-bg-opacity: .1;
-  --state-color: transparent;
+  --skin-text: var(--skin-color, inherit);
+  --skin-bg: transparent;
+  --skin-color: rgba(var(--skin-outline-rgb), 1);
+  --state-color: rgba(var(--skin-outline-rgb), .1);
 }
 
 .outline {
-  --skin-hover-bg: var(--color-gray-500-rgb);
+  --skin-outline-rgb: var(--color-fore-500-rgb);
 }
 .primary-outline {
-  --skin-color: var(--color-primary-500-rgb);
+  --skin-outline-rgb: var(--color-primary-500-rgb);
 }
 .secondary-outline {
-  --skin-color: var(--color-secondary-500-rgb);
+  --skin-outline-rgb: var(--color-secondary-500-rgb);
 }
 .success-outline {
-  --skin-color: var(--color-success-500-rgb);
+  --skin-outline-rgb: var(--color-success-500-rgb);
 }
 .warning-outline {
-  --skin-color: var(--color-warning-500-rgb);
+  --skin-outline-rgb: var(--color-warning-500-rgb);
 }
 .danger-outline {
-  --skin-color: var(--color-danger-500-rgb);
+  --skin-outline-rgb: var(--color-danger-500-rgb);
 }
 .important-outline {
-  --skin-color: var(--color-important-500-rgb);
+  --skin-outline-rgb: var(--color-important-500-rgb);
 }
 .special-outline {
-  --skin-color: var(--color-special-500-rgb);
+  --skin-outline-rgb: var(--color-special-500-rgb);
 }
 
 .light-gray-outline {
-  --skin-text: var(--color-gray-400-rgb);
+  --skin-outline-rgb: var(--color-gray-400-rgb);
 }
 .gray-outline {
-  --skin-text: var(--color-gray-500-rgb);
+  --skin-outline-rgb: var(--color-gray-500-rgb);
 }
 .dark-gray-outline {
-  --skin-text: var(--color-gray-600-rgb);
+  --skin-outline-rgb: var(--color-gray-600-rgb);
 }

lib/utilities/src/skin/pale.css

@@ -6,7 +6,6 @@
 .danger-pale,
 .important-pale,
 .special-pale,
-.white-pale,
 .bright-pale,
 .lightest-pale,
 .lighter-pale,
@@ -15,73 +14,66 @@
 .dark-gray-pale,
 .darker-pale,
 .darkest-pale,
-.inky-pale,
-.black-pale {
+.inky-pale {
   @apply -skin;
-  --tw-bg-opacity: 0.1;
-  --skin-ring-opacity: 1;
-  --skin-text: var(--skin-color);
-  --skin-bg: var(--skin-color);
-  --skin-hover-bg-opacity: .1;
+
+  --skin-color: rgba(var(--skin-pale-rgb), .1);
+  --skin-text: rgba(var(--skin-pale-rgb), 1);
 }
 
 .pale {
-  --skin-hover-bg: var(--color-gray-500-rgb);
+  --skin-pale-rgb: var(--color-gray-500-rgb);
 }
 .primary-pale {
-  --skin-color: var(--color-primary-500-rgb);
+  --skin-pale-rgb: var(--color-primary-500-rgb);
 }
 .secondary-pale {
-  --skin-color: var(--color-secondary-500-rgb);
+  --skin-pale-rgb: var(--color-secondary-500-rgb);
 }
 .success-pale {
-  --skin-color: var(--color-success-500-rgb);
+  --skin-pale-rgb: var(--color-success-500-rgb);
 }
 .warning-pale {
-  --skin-color: var(--color-warning-500-rgb);
+  --skin-pale-rgb: var(--color-warning-500-rgb);
 }
 .danger-pale {
-  --skin-color: var(--color-danger-500-rgb);
+  --skin-pale-rgb: var(--color-danger-500-rgb);
 }
 .important-pale {
-  --skin-color: var(--color-important-500-rgb);
+  --skin-pale-rgb: var(--color-important-500-rgb);
 }
 .special-pale {
-  --skin-color: var(--color-special-500-rgb);
+  --skin-pale-rgb: var(--color-special-500-rgb);
 }
 
-
 .bright-pale {
-  --skin-color: var(--color-gray-100-rgb);
+  --skin-pale-rgb: var(--color-gray-100-rgb);
   --skin-text: var(--color-gray-400-rgb);
 }
 .lightest-pale {
-  --skin-color: var(--color-gray-200-rgb);
+  --skin-pale-rgb: var(--color-gray-200-rgb);
   --skin-text: var(--color-gray-400-rgb);
 }
 .lighter-pale {
-  --skin-color: var(--color-gray-300-rgb);
+  --skin-pale-rgb: var(--color-gray-300-rgb);
   --skin-text: var(--color-gray-500-rgb);
 }
 .light-gray-pale {
-  --skin-color: var(--color-gray-400-rgb);
+  --skin-pale-rgb: var(--color-gray-400-rgb);
   --skin-text: var(--color-gray-500-rgb);
 }
 .gray-pale {
-  --skin-color: var(--color-gray-500-rgb);
+  --skin-pale-rgb: var(--color-gray-500-rgb);
 }
 .dark-gray-pale {
-  --skin-color: var(--color-gray-600-rgb);
+  --skin-pale-rgb: var(--color-gray-600-rgb);
 }
 .darker-pale {
-  --skin-color: var(--color-gray-700-rgb);
+  --skin-pale-rgb: var(--color-gray-700-rgb);
 }
 .darkest-pale {
-  --skin-color: var(--color-gray-800-rgb);
+  --skin-pale-rgb: var(--color-gray-800-rgb);
 }
 .inky-pale {
-  --skin-color: var(--color-gray-900-rgb);
-}
-.black-pale {
-  --skin-color: var(--color-black-rgb);
+  --skin-pale-rgb: var(--color-gray-900-rgb);
 }

lib/utilities/src/skin/skin.css

@@ -2,22 +2,31 @@
 
 @layer utilities {
     .-skin {
-        --skin-bg: var(--skin-color);
-        --tw-ring-color: rgba(var(--skin-ring), var(--skin-ring-opacity));
+        /* --skin-color: unset;            /* Default colors. */
+        /* --skin-text: unset;             /* Text colors. */
+        --skin-bg: var(--skin-color);      /* Background colors. */
+        --skin-ring: var(--skin-color);    /* Ring colors. */
+        --skin-border: var(--skin-color);
+
+        --skin-hover-text: var(--skin-text);
+        --skin-hover-bg: var(--skin-bg);
+
+        --tw-ring-color: var(--skin-ring);
         --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-        --color-link-hover-rgb: var(--skin-text);
 
-        background-color: rgba(var(--skin-bg), var(--tw-bg-opacity));
-        background-image: var(--skin-bg-img);
-        color: rgba(var(--skin-text), var(--tw-text-opacity));
-        border: var(--skin-border-width) var(--skin-border-style) rgba(var(--skin-border, var(--skin-bg)), var(--tw-border-opacity));
+        --color-link-hover: var(--skin-text);
+
+        background-color: var(--skin-bg);
+        color: var(--skin-text);
+        border-color: var(--skin-border);
         box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 
         @apply -transition-[color,background-color,border-color,text-decoration-color,box-shadow];
     }
 
     .-skin:hover {
-        background-color: rgba(var(--skin-hover-bg, var(--skin-bg)), var(--skin-hover-bg-opacity, var(--tw-bg-opacity)))!important;
+        background-color: var(--skin-hover-bg);
+        color: var(--skin-hover-text);
     }
 }