From a9f19a3797da646410beb3754b18de78949718e7 Mon Sep 17 00:00:00 2001 From: Michael Pande Date: Wed, 31 Jan 2024 13:05:22 +0100 Subject: [PATCH] Added all semantically named colors --- .../src/lib/components/Link/Link.module.scss | 2 +- .../style-dictionary/src/default_theme.json | 204 +++++++++++++++--- 2 files changed, 174 insertions(+), 32 deletions(-) diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss index 1c8cf9aa..6290505d 100644 --- a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss +++ b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss @@ -9,6 +9,6 @@ &:focus { color: variables.$color-text-on-action-subtle; - background-color: variables.$color-surface-action-subtle-active; + background-color: variables.$color-surface-subtle-active; } } diff --git a/libs/pxweb2-ui/style-dictionary/src/default_theme.json b/libs/pxweb2-ui/style-dictionary/src/default_theme.json index 85341600..3dc3bc9a 100644 --- a/libs/pxweb2-ui/style-dictionary/src/default_theme.json +++ b/libs/pxweb2-ui/style-dictionary/src/default_theme.json @@ -1,35 +1,177 @@ { - "border-radius-none": { - "value": "0" + "border-radius": { + "none": { + "value": "0" + }, + "xxsmall": { + "value": "0.5px" + }, + "xsmall": { + "value": "2px" + }, + "small": { + "value": "4px" + }, + "medium": { + "value": "8px" + }, + "large": { + "value": "16px" + }, + "xlarge": { + "value": "24px" + }, + "full": { + "value": "9999px" + } }, - "border-radius-xxsmall": { - "value": "0.5px" - }, - "border-radius-xsmall": { - "value": "2px" - }, - "border-radius-small": { - "value": "4px" - }, - "border-radius-medium": { - "value": "8px" - }, - "border-radius-large": { - "value": "16px" - }, - "border-radius-xlarge": { - "value": "24px" - }, - "border-radius-full": { - "value": "9999px" - }, - "color-text-action": { - "value": "#274247" - }, - "color-text-on-action-subtle": { - "value": "#162327" - }, - "color-surface-action-subtle-active": { - "value": "#C3DCDC" + "color": { + "background-default": { + "value": "#FFFFFF" + }, + "background-subtle": { + "value": "#F0F8F9" + }, + "surface-default": { + "value": "#FFFFFF" + }, + "surface-subtle": { + "value": "#F0F8F9" + }, + "surface-moderate": { + "value": "#C3DCDC" + }, + "surface-inverted": { + "value": "#274247" + }, + "surface-highlight": { + "value": "#ECFEED" + }, + "surface-action": { + "value": "#274247" + }, + "surface-action-hover": { + "value": "#274247" + }, + "surface-action-active": { + "value": "#162327" + }, + "surface-subtle-hover": { + "value": "#DBEBEB" + }, + "surface-subtle-active": { + "value": "#C3DCDC" + }, + "surface-info-subtle": { + "value": "#D7ECFE" + }, + "surface-info-moderate": { + "value": "#C3E6FE" + }, + "surface-success-subtle": { + "value": "#DBF5DC" + }, + "surface-success-moderate": { + "value": "#B6E8B8" + }, + "surface-warning-subtle": { + "value": "#FBF1C0" + }, + "surface-warning-moderate": { + "value": "#FEEB9F" + }, + "surface-error-subtle": { + "value": "#FFE4E0" + }, + "surface-error-moderate": { + "value": "#FFCEC7" + }, + "border-default": { + "value": "#162327" + }, + "border-subtle": { + "value": "#C3DCDC" + }, + "border-moderate": { + "value": "#62919A" + }, + "border-divider": { + "value": "#62919A" + }, + "border-divider-subtle": { + "value": "#C3DCDC" + }, + "border-action": { + "value": "#274247" + }, + "border-hover": { + "value": "#62919A" + }, + "border-selected": { + "value": "#274247" + }, + "border-info": { + "value": "#37B3F9" + }, + "border-success": { + "value": "#4FC887" + }, + "border-warning": { + "value": "#FCBF27" + }, + "border-error": { + "value": "#FD7E6D" + }, + "border-focus": { + "value": "#9272FC" + }, + "border-focus-on-inverted": { + "value": "#9272FC" + }, + "text-default": { + "value": "#162327" + }, + "text-subtle": { + "value": "#2D6975" + }, + "text-on-inverted": { + "value": "#FFFFFF" + }, + "text-action": { + "value": "#274247" + }, + "text-on-action": { + "value": "#FFFFFF" + }, + "text-on-action-subtle": { + "value": "#162327" + }, + "icon-default": { + "value": "#162327" + }, + "icon-on-inverted": { + "value": "#FFFFFF" + }, + "icon-action": { + "value": "#274247" + }, + "icon-on-action": { + "value": "#FFFFFF" + }, + "icon-on-action-subtle": { + "value": "#162327" + }, + "icon-info": { + "value": "#0179C8" + }, + "icon-success": { + "value": "#00824D" + }, + "icon-warning": { + "value": "#CB7603" + }, + "icon-error": { + "value": "#E23822" + } } }