@hawiyah/styles 0.2.0 → 0.2.1

package/dist/nic-pagination.css

@@ -32,8 +32,8 @@
 .hw-pagination .hw-button:is(:disabled, [aria-disabled='true']) { color: var(--hw-color-on-disabled); background: transparent; border-color: transparent; opacity: .5; cursor: not-allowed; }
 .hw-pagination .hw-pagination-gap-trigger[aria-disabled='true'] { color: var(--hw-color-on-disabled); opacity: .5; cursor: not-allowed; }
 .hw-pagination :is(.hw-pagination-item, .hw-pagination-arrow, .hw-pagination-gap-trigger, [data-hw-page]):focus-visible:not(:disabled, [aria-disabled='true']) { outline: 2px solid var(--hw-color-focus-contrast); outline-offset: 2px; background: var(--hw-color-surface-muted); }
-.hw-pagination-arrow::before { content: ''; inline-size: 18px; block-size: 18px; background: currentColor; mask: url('./assets/pagination-arrow.svg') center / contain no-repeat; transform: scaleX(var(--_nq-inline-sign, 1)); }
-.hw-pagination-arrow[data-hw-previous]::before { transform: scaleX(calc(-1 * var(--_nq-inline-sign, 1))); }
+.hw-pagination-arrow::before { content: ''; inline-size: 18px; block-size: 18px; background: currentColor; mask: url('./assets/icons/arrow-right-01.svg') center / contain no-repeat; transform: scaleX(var(--_hw-inline-sign, 1)); }
+.hw-pagination-arrow[data-hw-previous]::before { transform: scaleX(calc(-1 * var(--_hw-inline-sign, 1))); }
 .hw-pagination-gap { position: static; }
 .hw-pagination-gap-trigger { list-style: none; }
 .hw-pagination-gap-trigger::-webkit-details-marker { display: none; }

package/dist/nic-select.css

@@ -31,15 +31,15 @@
 @media (forced-colors: none) {
   select.hw-select:where(:not([multiple]):is(:not([size]), [size='0'], [size='1'])) {
     appearance: var(--hw-profile-select-appearance, auto);
-    --_nq-select-image: var(--hw-profile-select-down,);
-    --_nq-select-size: var(--hw-profile-select-size,);
-    --_nq-rtl-position: var(--_nq-rtl-only) var(--hw-profile-select-position-rtl,);
-    --_nq-select-position: var(--_nq-rtl-position, var(--hw-profile-select-position-ltr,));
-    --_nq-rtl-padding: var(--_nq-rtl-only) var(--hw-profile-select-padding-rtl, var(--hw-space-3));
-    --hw-profile-field-padding-end: var(--_nq-rtl-padding, var(--hw-profile-select-padding-ltr, var(--hw-space-3)));
+    --_hw-select-image: var(--hw-profile-select-down,);
+    --_hw-select-size: var(--hw-profile-select-size,);
+    --_hw-rtl-position: var(--_hw-rtl-only) var(--hw-profile-select-position-rtl,);
+    --_hw-select-position: var(--_hw-rtl-position, var(--hw-profile-select-position-ltr,));
+    --_hw-rtl-padding: var(--_hw-rtl-only) var(--hw-profile-select-padding-rtl, var(--hw-space-3));
+    --hw-profile-field-padding-end: var(--_hw-rtl-padding, var(--hw-profile-select-padding-ltr, var(--hw-space-3)));
     font-size: var(--hw-profile-select-font, inherit);
   }
-  select.hw-select:where(:not([multiple]):is(:not([size]), [size='0'], [size='1'])):focus { --_nq-select-image: var(--hw-profile-select-up,); }
+  select.hw-select:where(:not([multiple]):is(:not([size]), [size='0'], [size='1'])):focus { --_hw-select-image: var(--hw-profile-select-up,); }
 }
 .hw-field > .hw-hint { color: var(--hw-color-field-helper, var(--hw-color-text-muted)); font-size: var(--hw-profile-helper-size, var(--hw-text-sm)); }
 .hw-field > .hw-error {

package/dist/nic-tables.css

@@ -42,9 +42,9 @@
 .hw-data-table [aria-sort='ascending'],
 .hw-data-table [aria-sort='descending'] { color: var(--hw-color-link); }
 /* Author this span with aria-hidden="true"; aria-sort carries the meaning. */
-.hw-table-sort-icon::before { content: '↕'; }
-th[aria-sort='ascending'] .hw-table-sort-icon::before { content: '↑'; }
-th[aria-sort='descending'] .hw-table-sort-icon::before { content: '↓'; }
+.hw-table-sort-icon::before { content: ''; display: inline-block; inline-size: 1rem; block-size: 1rem; vertical-align: middle; background: currentColor; mask: url('./assets/icons/arrow-data-transfer-vertical.svg') center / contain no-repeat; }
+th[aria-sort='ascending'] .hw-table-sort-icon::before { mask-image: url('./assets/icons/arrow-up-02.svg'); }
+th[aria-sort='descending'] .hw-table-sort-icon::before { mask-image: url('./assets/icons/arrow-down-02.svg'); }
 .hw-table tbody tr:hover { background: var(--hw-color-table-row-hover, var(--hw-color-canvas)); }
 .hw-table tbody tr:nth-child(odd):hover { background: var(--hw-color-table-row-hover-odd, var(--hw-color-canvas)); }
 /* Selection stays visible while hovering, including on striped rows. */

package/dist/nic-tabs.css

@@ -74,7 +74,7 @@
   font: inherit; font-size: 14px; text-align: start; white-space: normal; overflow-wrap: anywhere; cursor: pointer;
 }
 .hw-tab-overflow-item:hover:not(:disabled) { background: var(--hw-color-surface-muted); }
-.hw-tab-overflow-item[aria-pressed='true'] { font-weight: 700; box-shadow: inset calc(3px * var(--_nq-inline-sign, 1)) 0 var(--hw-color-primary); }
+.hw-tab-overflow-item[aria-pressed='true'] { font-weight: 700; box-shadow: inset calc(3px * var(--_hw-inline-sign, 1)) 0 var(--hw-color-primary); }
 .hw-tab-overflow-item:disabled { color: var(--hw-color-on-disabled); cursor: not-allowed; }
 .hw-tab-overflow-item:focus-visible { outline: 2px solid var(--hw-color-focus-contrast); outline-offset: -2px; }
 .hw-tabs[data-variant='pills'] :is(.hw-tab-bar, .hw-tab-list)::after { display: none; }

package/dist/site-verification.css

@@ -7,7 +7,7 @@
 .hw-verification-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 1.25rem; block-size: 1.25rem; }
 .hw-verification-mark:empty { display: none; }
 .hw-verification-mark :is(img,svg) { display: block; max-inline-size: 100%; max-block-size: 100%; }
-.hw-verification-toggle { display: inline-flex; align-items: center; gap: var(--hw-space-1); color: var(--hw-color-primary-text); text-decoration: underline; text-underline-offset: .25em; }
+.hw-verification-toggle { display: inline-flex; align-items: center; gap: var(--hw-space-1); color: var(--hw-color-link); text-decoration: underline; text-underline-offset: .25em; }
 .hw-verification-toggle .hw-icon { inline-size: 1rem; block-size: 1rem; transition: transform 200ms ease; }
 .hw-site-verification details[open] .hw-verification-toggle .hw-icon { transform: rotate(180deg); }
 .hw-site-verification summary:hover .hw-verification-toggle { color: var(--hw-color-text); }

package/dist/stepper.css

@@ -15,8 +15,8 @@
   font-weight: var(--hw-step-complete-weight, inherit);
 }
 .hw-step:is([data-state='complete'], [data-state='completed'])::before {
-  border-color: var(--hw-step-complete-border, var(--hw-color-primary-subtle));
-  background: var(--hw-step-complete-background, var(--hw-color-primary-subtle));
+  border-color: var(--hw-step-complete-border, var(--hw-color-primary));
+  background: var(--hw-step-complete-background, var(--hw-color-primary));
   color: var(--hw-step-complete-marker-color, var(--hw-color-primary-text));
 }
 .hw-step:is([data-state='complete'], [data-state='completed']):not(:last-child)::after { background: var(--hw-step-complete-connector, var(--hw-color-border)); }

package/dist/tooltip-placement.css

@@ -12,22 +12,22 @@
   --hw-profile-tooltip-shadow: initial;
 }
 .hw-tooltip {
-  --_nq-tooltip-background: var(--hw-color-inverse);
-  --_nq-tooltip-color: var(--hw-color-on-inverse);
+  --_hw-tooltip-background: var(--hw-color-inverse);
+  --_hw-tooltip-color: var(--hw-color-on-inverse);
   box-sizing: border-box;
   min-inline-size: min(var(--hw-tooltip-min-width, var(--hw-profile-tooltip-min, 0px)), calc(100vw - 2rem));
   max-inline-size: min(var(--hw-tooltip-max-width, var(--hw-profile-tooltip-max, 20rem)), calc(100vw - 2rem));
   padding: var(--hw-tooltip-padding, var(--hw-profile-tooltip-padding, var(--hw-space-2) var(--hw-space-3)));
-  background: var(--hw-tooltip-background, var(--_nq-tooltip-background));
-  color: var(--hw-tooltip-color, var(--_nq-tooltip-color));
+  background: var(--hw-tooltip-background, var(--_hw-tooltip-background));
+  color: var(--hw-tooltip-color, var(--_hw-tooltip-color));
   line-height: 1.5;
   box-shadow: var(--hw-tooltip-shadow, var(--hw-profile-tooltip-shadow, var(--hw-shadow-sm)));
 }
 /* Resolve color roles on the tooltip so nested mode overrides stay live. */
 @scope (:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom'])) to ([data-hw-theme]) {
   .hw-tooltip {
-    --_nq-tooltip-background: var(--hw-color-surface);
-    --_nq-tooltip-color: var(--hw-color-text-muted);
+    --_hw-tooltip-background: var(--hw-color-surface);
+    --_hw-tooltip-color: var(--hw-color-text-muted);
   }
 }
 /* Logical sides follow the nearest direction, independently of language. */
@@ -41,7 +41,7 @@
 }
 .hw-tooltip:not([data-placement='start'], [data-placement='end'])[data-align='center'] {
   inset-inline-start: 50%;
-  translate: calc(-50% * var(--_nq-inline-sign, 1)) 0;
+  translate: calc(-50% * var(--_hw-inline-sign, 1)) 0;
 }
 .hw-tooltip:is([data-placement='start'], [data-placement='end']) {
   inset-block-start: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hawiyah/styles",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Component styles for Hawiyah, a UI library built to comply with the DGA Platforms Code",
   "type": "module",
   "sideEffects": [
@@ -19,7 +19,7 @@
     "./assets/*": "./dist/assets/*"
   },
   "dependencies": {
-    "@hawiyah/tokens": "0.2.0"
+    "@hawiyah/tokens": "0.2.1"
   },
   "keywords": [
     "hawiyah",