diff --git a/src/base.css b/src/base.css index fda73cef..4fba954a 100644 --- a/src/base.css +++ b/src/base.css @@ -256,15 +256,9 @@ /* Link utilities */ - --underline-link-primary: var( - --color-brand-blue-600 - ); /* Temporary light mode value */ - --underline-link-secondary: var( - --color-neutral-900 - ); /* Temporary light mode value */ - --underline-link-visited: var( - --color-brand-blue-800 - ); /* Temporary light mode value */ + --underline-link-primary: var(--color-brand-blue-600); + --underline-link-secondary: var(--color-base-black); + --underline-link-visited: var(--color-feedback-violet-600); /* ============================================ @@ -272,24 +266,12 @@ * ============================================ */ /* Border utilities - neutral states */ - --border-neutral-active: var( - --color-neutral-200 - ); /* Temporary light mode value */ - --border-neutral-hover: var( - --color-neutral-300 - ); /* Temporary light mode value */ - --border-neutral-default: var( - --color-neutral-400 - ); /* Temporary light mode value */ - --border-neutral-disabled: var( - --color-neutral-400 - ); /* Temporary light mode value */ - --border-neutral-softest: var( - --color-neutral-500 - ); /* Temporary light mode value */ - --border-neutral-inset: var( - --color-neutral-900 - ); /* Temporary light mode value */ + --border-neutral-active: var(--color-neutral-600); + --border-neutral-hover: var(--color-neutral-500); + --border-neutral-default: var(--color-neutral-400); + --border-neutral-disabled: hsl(from var(--color-neutral-400) h s l / 40%); + --border-neutral-softest: var(--color-neutral-300); + --border-neutral-inset: var(--color-base-black); --border-neutral-alpha: hsla( 0, 0%, @@ -312,9 +294,9 @@ /* Border Success utilities */ --border-success-highlight: var(--color-feedback-green-600); - --border-success-default: var(--color-feedback-green-600); - --border-success-muted: hsl(from var(--color-feedback-green-600) h s l / 56%); - --border-success-softest: var(--colo-feedback-green-600); + --border-success-default: var(--color-feedback-green-500); + --border-success-muted: hsl(from var(--color-feedback-green-500) h s l / 56%); + --border-success-softest: var(--colo-feedback-green-300); /* Border Warning utilities */ --border-warning-highlight: var(--color-feedback-orange-600); @@ -371,6 +353,51 @@ --fill-warning-default: var(--color-feedback-orange-500); --fill-warning-muted: hsl(from var(--color-feedback-orange-500) h s l / 56%); + /* ============================================ + * Strokes + * ============================================ */ + + /* Neutrals */ + --stroke-neutral-highlight: var(--color-base-black); + --stroke-neutral-active: var(--color-neutral-900); + --stroke-neutral-default: var(--color-neutral-800); + --stroke-neutral-muted: hsl(from var(--color-neutral-800) h s l / 56%); + + /* onColor / Dark */ + --stroke-onColor-dark-highlight: var(--color-base-black); + --stroke-onColor-dark-default: var(--color-neutral-800); + --stroke-onColor-dark-muted: hsl(from var(--color-neutral-900) h s l / 56%); + + /* onColor / Light */ + --stroke-onColor-light-highlight: var(--color-base-white); + --stroke-onColor-light-default: var(--color-neutral-100); + --stroke-onColor-light-muted: hsl(from var(--color-neutral-100) h s l / 56%); + + /* Links */ + --stroke-link-primary: var(--color-brand-blue-600); + --stroke-link-secondary: var(--color-base-black); + --stroke-link-visited: var(--color-feedback-violet-600); + + /* Destructive */ + --stroke-destructive-highlight: var(--color-feedback-red-600); + --stroke-destructive-default: var(--color-feedback-red-500); + --stroke-destructive-muted: hsl(from var(--color-feedback-red-600) h s l / 56%); + + /* Information */ + --stroke-information-highlight: var(--color-feedback-blue-600); + --stroke-information-default: var(--color-feedback-blue-500); + --stroke-information-muted: hsl(from var(--color-feedback-blue-500) h s l / 56%); + + /* Success */ + --stroke-success-highlight: var(--color-feedback-green-600); + --stroke-success-default: var(--color-feedback-green-500); + --stroke-success-muted: hsl(from var(--color-feedback-green-500) h s l / 56%); + + /* Warning */ + --stroke-warning-highlight: var(--color-feedback-orange-600); + --stroke-warning-default: var(--color-feedback-orange-500); + --stroke-warning-muted: hsl(from var(--color-feedback-orange-500) h s l / 56%); + /* ============================================ * BACKGROUNDS * ============================================ */ @@ -604,13 +631,22 @@ --text-warning: var(--color-feedback-orange-300); --border-warning: var(--color-feedback-orange-700); + /* Link utilities (dark mode) */ + --underline-link-primary: var(--color-brand-blue-300); + --underline-link-secondary: var(--color-base-white); + --underline-link-visited: var(--color-feedback-violet-300); + + /* ============================================ + * BORDER TOKENS + * ============================================ */ + /* Border utilities - neutral states (dark mode) */ --border-neutral-active: var(--color-neutral-400); --border-neutral-hover: var(--color-neutral-500); --border-neutral-default: var(--color-neutral-600); - --border-neutral-disabled: var(--color-neutral-600); + --border-neutral-disabled: hsl(from var(--color-neutral-600) h s l / 40%); --border-neutral-softest: var(--color-neutral-700); - --border-neutral-inset: var(--color-base-black); + --border-neutral-inset: var(--color-base-white); --border-neutral-alpha: hsla( 255, 255%, @@ -618,16 +654,6 @@ 0.2 ); /* White with 20% opacity */ - - /* Link utilities (dark mode) */ - --underline-link-primary: var(--color-brand-blue-300); - --underline-link-secondary: var(--color-base-white); - --underline-link-visited: var(--color-brand-blue-400); - - /* ============================================ - * BORDER TOKENS - * ============================================ */ - /* Border destructive utilities */ --border-destructive-highlight: var(--color-feedback-red-300); --border-destructive-default: var(--color-feedback-red-500); @@ -642,9 +668,9 @@ /* Border Success utilities */ --border-success-highlight: var(--color-feedback-green-300); - --border-success-default: var(--color-feedback-green-300); - --border-success-muted: hsl(from var(--color-feedback-green-300) h s l / 56%); - --border-success-softest: var(--colo-feedback-green-300); + --border-success-default: var(--color-feedback-green-500); + --border-success-muted: hsl(from var(--color-feedback-green-500) h s l / 56%); + --border-success-softest: var(--colo-feedback-green-700); /* Border Warning utilities */ --border-warning-highlight: var(--color-feedback-orange-300); @@ -701,6 +727,51 @@ --fill-warning-default: var(--color-feedback-orange-400); --fill-warning-muted: hsl(from var(--color-feedback-orange-400) h s l / 56%); + /* ============================================ + * Strokes + * ============================================ */ + + /* Neutrals */ + --stroke-neutral-highlight: var(--color-base-white); + --stroke-neutral-active: var(--color-neutral-100); + --stroke-neutral-default: var(--color-neutral-200); + --stroke-neutral-muted: hsl(from var(--color-neutral-200) h s l / 56%); + + /* onColor / Dark */ + --stroke-onColor-dark-highlight: var(--color-base-black); + --stroke-onColor-dark-default: var(--color-neutral-800); + --stroke-onColor-dark-muted: hsl(from var(--color-neutral-900) h s l / 56%); + + /* onColor / Light */ + --stroke-onColor-light-highlight: var(--color-base-white); + --stroke-onColor-light-default: var(--color-neutral-100); + --stroke-onColor-light-muted: hsl(from var(--color-neutral-100) h s l / 56%); + + /* Links */ + --stroke-link-primary: var(--color-brand-blue-300); + --stroke-link-secondary: var(--color-base-white); + --stroke-link-visited: var(--color-feedback-violet-300); + + /* Destructive */ + --stroke-destructive-highlight: var(--color-feedback-red-300); + --stroke-destructive-default: var(--color-feedback-red-400); + --stroke-destructive-muted: hsl(from var(--color-feedback-red-400) h s l / 56%); + + /* Information */ + --stroke-information-highlight: var(--color-feedback-blue-300); + --stroke-information-default: var(--color-feedback-blue-400); + --stroke-information-muted: hsl(from var(--color-feedback-blue-400) h s l / 56%); + + /* Success */ + --stroke-success-highlight: var(--color-feedback-green-300); + --stroke-success-default: var(--color-feedback-green-400); + --stroke-success-muted: hsl(from var(--color-feedback-green-400) h s l / 56%); + + /* Warning */ + --stroke-warning-highlight: var(--color-feedback-orange-300); + --stroke-warning-default: var(--color-feedback-orange-400); + --stroke-warning-muted: hsl(from var(--color-feedback-orange-400) h s l / 56%); + /* ============================================ * BACKGROUNDS * ============================================ */ diff --git a/src/utilities.css b/src/utilities.css index 3ecfa990..7f90357c 100644 --- a/src/utilities.css +++ b/src/utilities.css @@ -511,6 +511,23 @@ border-color: var(--border-success-softest); } +/* Warning Border utilities */ +@utility border-warning-highlight { + border-color: var(--border-warning-highlight); +} + +@utility border-warning-default { + border-color: var(--border-warning-default); +} + +@utility border-warning-muted { + border-color: var(--border-warning-muted); +} + +@utility border-warning-softest { + border-color: var(--border-warning-softest); +} + /* Focus Border utilities */ @utility border-focus { border-color: var(--border-focus); @@ -628,6 +645,118 @@ fill: var(--fill-warning-muted); } +/* ============================= +* Strokes +* ============================*/ + +/* Neutrals */ +@utility stroke-neutral-highlight { + stroke: var(--stroke-neutral-highlight); +} + +@utility stroke-neutral-active { + stroke: var(--stroke-neutral-active); +} + +@utility stroke-neutral-default { + stroke: var(--stroke-neutral-default); +} + +@utility stroke-neutral-muted { + stroke: var(--stroke-neutral-muted); +} + +/* onColor / Dark */ +@utility stroke-onColor-dark-highlight { + stroke: var(--stroke-onColor-dark-highlight); +} + +@utility stroke-onColor-dark-default { + stroke: var(--stroke-onColor-dark-default); +} + +@utility stroke-onColor-dark-muted { + stroke: var(--stroke-onColor-dark-muted); +} + +/* onColor / Light */ +@utility stroke-onColor-light-highlight { + stroke: var(--stroke-onColor-light-highlight); +} + +@utility stroke-onColor-light-default { + stroke: var(--stroke-onColor-light-default); +} + +@utility stroke-onColor-light-muted { + stroke: var(--stroke-onColor-light-muted); +} + +/* Link stroke */ +@utility stroke-link-primary { + stroke: var(--stroke-link-primary); +} + +@utility stroke-link-secondary { + stroke: var(--stroke-link-secondary); +} + +@utility stroke-link-visited { + stroke: var(--stroke-link-visited); +} + +/* Destructive stroke */ +@utility stroke-destructive-highlight { + stroke: var(--stroke-destructive-highlight); +} + +@utility stroke-destructive-default { + stroke: var(--stroke-destructive-default); +} + +@utility stroke-destructive-muted { + stroke: var(--stroke-destructive-muted); +} + +/* Information stroke */ +@utility stroke-information-highlight { + stroke: var(--stroke-information-highlight); +} + +@utility stroke-information-default { + stroke: var(--stroke-information-default); +} + +@utility stroke-information-muted { + stroke: var(--stroke-information-muted); +} + +/* Success stroke */ +@utility stroke-success-highlight { + stroke: var(--stroke-success-highlight); +} + +@utility stroke-success-default { + stroke: var(--stroke-success-default); +} + +@utility stroke-success-muted { + stroke: var(--stroke-success-muted); +} + +/* Warninig stroke */ +@utility stroke-warning-highlight { + stroke: var(--stroke-warning-highlight); +} + +@utility stroke-warning-default { + stroke: var(--stroke-warning-default); +} + +@utility stroke-warning-muted { + stroke: var(--stroke-warning-muted); +} + /* ============================================ * BACKGROUNDS * ============================================ */