From e6bd7d71745e6b9c75b22f656f00ac81c088cab6 Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Thu, 26 Sep 2024 18:02:17 -0400 Subject: [PATCH] feat(borders): adds new border variables to support thick and extraThick intent borders Refactors Notification component to use border variables instead of hardcoded 5px border left --- .../styles-dictionary/css/variables.css | 100 +++++++++++------- .../design-tokens/borders.json | 68 ++++++++++-- .../styles-dictionary/scss/_variables.scss | 44 ++++++-- .../components/src/core/Notification/style.ts | 6 +- .../src/core/styles/common/SDSAppTheme.ts | 44 ++++++-- .../src/core/styles/common/types.ts | 2 + 6 files changed, 194 insertions(+), 70 deletions(-) diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css index adde0bef..2cae6e08 100644 --- a/packages/components/src/common/styles-dictionary/css/variables.css +++ b/packages/components/src/common/styles-dictionary/css/variables.css @@ -12,15 +12,27 @@ --sds-border-base-hover: 1px dashed #000000; --sds-border-base-pressed: 1px dashed #000000; --sds-border-base-table: 1px solid #c3c3c3; - --sds-border-beta-default: 1px solid #8b54e2; - --sds-border-info-default: 1px solid #1a6cef; + --sds-border-beta-default: 1px solid #6526b5; + --sds-border-beta-extra-thick: 4px solid #6526b5; + --sds-border-beta-thick: 2px solid #6526b5; + --sds-border-info-default: 1px solid #0041b9; + --sds-border-info-extra-thick: 4px solid #0041b9; + --sds-border-info-thick: 2px solid #0041b9; --sds-border-link-dashed: 1px dashed; --sds-border-link-solid: 1px solid; - --sds-border-negative-default: 1px solid #db2131; + --sds-border-negative-default: 1px solid #980013; + --sds-border-negative-extra-thick: 4px solid #980013; + --sds-border-negative-thick: 2px solid #980013; --sds-border-neutral-default: 1px solid #969696; + --sds-border-neutral-extra-thick: 4px solid #969696; + --sds-border-neutral-thick: 2px solid #969696; --sds-border-none: none; - --sds-border-notice-default: 1px solid #da9900; - --sds-border-positive-default: 1px solid #238444; + --sds-border-notice-default: 1px solid #b77800; + --sds-border-notice-extra-thick: 4px solid #b77800; + --sds-border-notice-thick: 2px solid #b77800; + --sds-border-positive-default: 1px solid #105b2b; + --sds-border-positive-extra-thick: 4px solid #105b2b; + --sds-border-positive-thick: 2px solid #105b2b; --sds-color-primitive-blue-100: #e2eeff; --sds-color-primitive-blue-200: #cce1ff; --sds-color-primitive-blue-300: #9dc6ff; @@ -182,9 +194,10 @@ --sds-corner-m: 4px; --sds-corner-s: 2px; --sds-corner-none: 0px; - --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); - --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); - --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); + --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3); + --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15), + 0px 2px 4px 0px rgba(0, 0, 0, 0.15); + --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; --sds-font-color: black; --sds-font-font-family-body: "Inter", sans-serif; @@ -218,13 +231,13 @@ --sds-font-body-l-600-letter-spacing: 0px; --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif; --sds-font-caps-xxxxs-600-letter-spacing: 0.5px; - --sds-font-caps-xxxxs-600-text-transform: uppercase; + --sds-font-caps-xxxxs-600-text-transform: uppercase; --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif; --sds-font-caps-xxxs-600-letter-spacing: 0.5px; - --sds-font-caps-xxxs-600-text-transform: uppercase; + --sds-font-caps-xxxs-600-text-transform: uppercase; --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif; --sds-font-caps-xxs-600-letter-spacing: 0.5px; - --sds-font-caps-xxs-600-text-transform: uppercase; + --sds-font-caps-xxs-600-text-transform: uppercase; --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif; --sds-font-header-xxxs-600-letter-spacing: 0.1px; --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif; @@ -297,15 +310,27 @@ --sds-border-base-hover: 1px dashed #ffffff; --sds-border-base-pressed: 1px dashed #ffffff; --sds-border-base-table: 1px solid #696969; - --sds-border-beta-default: 1px solid #cebef8; - --sds-border-info-default: 1px solid #a2c9ff; + --sds-border-beta-default: 1px solid #e4dcfc; + --sds-border-beta-extra-thick: 4px solid #e4dcfc; + --sds-border-beta-thick: 2px solid #e4dcfc; + --sds-border-info-default: 1px solid #cde3ff; + --sds-border-info-extra-thick: 4px solid #cde3ff; + --sds-border-info-thick: 2px solid #cde3ff; --sds-border-link-dashed: 1px dashed; --sds-border-link-solid: 1px solid; - --sds-border-negative-default: 1px solid #FF9385; + --sds-border-negative-default: 1px solid #ffbdb3; + --sds-border-negative-extra-thick: 4px solid #ffbdb3; + --sds-border-negative-thick: 2px solid #ffbdb3; --sds-border-neutral-default: 1px solid #aaaaaa; + --sds-border-neutral-extra-thick: 4px solid #aaaaaa; + --sds-border-neutral-thick: 2px solid #aaaaaa; --sds-border-none: none; - --sds-border-notice-default: 1px solid #cf8e00; - --sds-border-positive-default: 1px solid #85d898; + --sds-border-notice-default: 1px solid #efad00; + --sds-border-notice-extra-thick: 4px solid #efad00; + --sds-border-notice-thick: 2px solid #efad00; + --sds-border-positive-default: 1px solid #bcecc5; + --sds-border-positive-extra-thick: 4px solid #bcecc5; + --sds-border-positive-thick: 2px solid #bcecc5; --sds-color-primitive-blue-100: #002573; --sds-color-primitive-blue-200: #0048c5; --sds-color-primitive-blue-300: #2573f4; @@ -342,13 +367,13 @@ --sds-color-primitive-purple-700: #f0ebfe; --sds-color-primitive-purple-800: #fbf9ff; --sds-color-primitive-red-100: #630008; - --sds-color-primitive-red-200: #A30000; - --sds-color-primitive-red-300: #E52722; - --sds-color-primitive-red-400: #FF695B; - --sds-color-primitive-red-500: #FF9385; - --sds-color-primitive-red-600: #FFBDB3; - --sds-color-primitive-red-700: #FFD8D1; - --sds-color-primitive-red-800: #FFF1EE; + --sds-color-primitive-red-200: #a30000; + --sds-color-primitive-red-300: #e52722; + --sds-color-primitive-red-400: #ff695b; + --sds-color-primitive-red-500: #ff9385; + --sds-color-primitive-red-600: #ffbdb3; + --sds-color-primitive-red-700: #ffd8d1; + --sds-color-primitive-red-800: #fff1ee; --sds-color-primitive-yellow-100: #552300; --sds-color-primitive-yellow-200: #834500; --sds-color-primitive-yellow-300: #985a00; @@ -427,15 +452,15 @@ --sds-color-semantic-info-surface-primary: #002573; --sds-color-semantic-info-surface-secondary: #a2c9ff; --sds-color-semantic-info-text: #cde3ff; - --sds-color-semantic-negative-border: #FF9385; - --sds-color-semantic-negative-fill-hover: #FFBDB3; - --sds-color-semantic-negative-fill-pressed: #FFD8D1; - --sds-color-semantic-negative-fill-primary: #FF9385; + --sds-color-semantic-negative-border: #ff9385; + --sds-color-semantic-negative-fill-hover: #ffbdb3; + --sds-color-semantic-negative-fill-pressed: #ffd8d1; + --sds-color-semantic-negative-fill-primary: #ff9385; --sds-color-semantic-negative-fill-secondary: #630008; - --sds-color-semantic-negative-ornament: #FFBDB3; + --sds-color-semantic-negative-ornament: #ffbdb3; --sds-color-semantic-negative-surface-primary: #630008; - --sds-color-semantic-negative-surface-secondary: #FF9385; - --sds-color-semantic-negative-text: #FFBDB3; + --sds-color-semantic-negative-surface-secondary: #ff9385; + --sds-color-semantic-negative-text: #ffbdb3; --sds-color-semantic-neutral-border: #aaaaaa; --sds-color-semantic-neutral-fill-hover: #cdcdcd; --sds-color-semantic-neutral-fill-pressed: #ededed; @@ -467,9 +492,10 @@ --sds-corner-m: 4px; --sds-corner-s: 2px; --sds-corner-none: 0px; - --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); - --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); - --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); + --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3); + --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15), + 0px 2px 4px 0px rgba(0, 0, 0, 0.15); + --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; --sds-font-color: black; --sds-font-font-family-body: "Inter", sans-serif; @@ -503,13 +529,13 @@ --sds-font-body-l-600-letter-spacing: 0px; --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif; --sds-font-caps-xxxxs-600-letter-spacing: 0.5px; - --sds-font-caps-xxxxs-600-text-transform: uppercase; + --sds-font-caps-xxxxs-600-text-transform: uppercase; --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif; --sds-font-caps-xxxs-600-letter-spacing: 0.5px; - --sds-font-caps-xxxs-600-text-transform: uppercase; + --sds-font-caps-xxxs-600-text-transform: uppercase; --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif; --sds-font-caps-xxs-600-letter-spacing: 0.5px; - --sds-font-caps-xxs-600-text-transform: uppercase; + --sds-font-caps-xxs-600-text-transform: uppercase; --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif; --sds-font-header-xxxs-600-letter-spacing: 0.1px; --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif; @@ -566,4 +592,4 @@ --sds-space-xl: 24px; --sds-space-xxl: 40px; } -} \ No newline at end of file +} diff --git a/packages/components/src/common/styles-dictionary/design-tokens/borders.json b/packages/components/src/common/styles-dictionary/design-tokens/borders.json index ec03f18d..11ea74bf 100644 --- a/packages/components/src/common/styles-dictionary/design-tokens/borders.json +++ b/packages/components/src/common/styles-dictionary/design-tokens/borders.json @@ -55,14 +55,30 @@ }, "beta": { "default": { - "value": "1px solid {sds.color.primitive.purple.500.value}", - "darkValue": "1px solid {sds.color.primitive.purple.500.darkValue}" + "value": "1px solid {sds.color.primitive.purple.600.value}", + "darkValue": "1px solid {sds.color.primitive.purple.600.darkValue}" + }, + "extraThick": { + "value": "4px solid {sds.color.primitive.purple.600.value}", + "darkValue": "4px solid {sds.color.primitive.purple.600.darkValue}" + }, + "thick": { + "value": "2px solid {sds.color.primitive.purple.600.value}", + "darkValue": "2px solid {sds.color.primitive.purple.600.darkValue}" } }, "info": { "default": { - "value": "1px solid {sds.color.primitive.blue.500.value}", - "darkValue": "1px solid {sds.color.primitive.blue.500.darkValue}" + "value": "1px solid {sds.color.primitive.blue.600.value}", + "darkValue": "1px solid {sds.color.primitive.blue.600.darkValue}" + }, + "extraThick": { + "value": "4px solid {sds.color.primitive.blue.600.value}", + "darkValue": "4px solid {sds.color.primitive.blue.600.darkValue}" + }, + "thick": { + "value": "2px solid {sds.color.primitive.blue.600.value}", + "darkValue": "2px solid {sds.color.primitive.blue.600.darkValue}" } }, "link": { @@ -77,14 +93,30 @@ }, "negative": { "default": { - "value": "1px solid {sds.color.primitive.red.500.value}", - "darkValue": "1px solid {sds.color.primitive.red.500.darkValue}" + "value": "1px solid {sds.color.primitive.red.600.value}", + "darkValue": "1px solid {sds.color.primitive.red.600.darkValue}" + }, + "extraThick": { + "value": "4px solid {sds.color.primitive.red.600.value}", + "darkValue": "4px solid {sds.color.primitive.red.600.darkValue}" + }, + "thick": { + "value": "2px solid {sds.color.primitive.red.600.value}", + "darkValue": "2px solid {sds.color.primitive.red.600.darkValue}" } }, "neutral": { "default": { "value": "1px solid {sds.color.primitive.gray.500.value}", "darkValue": "1px solid {sds.color.primitive.gray.500.darkValue}" + }, + "extraThick": { + "value": "4px solid {sds.color.primitive.gray.500.value}", + "darkValue": "4px solid {sds.color.primitive.gray.500.darkValue}" + }, + "thick": { + "value": "2px solid {sds.color.primitive.gray.500.value}", + "darkValue": "2px solid {sds.color.primitive.gray.500.darkValue}" } }, "none": { @@ -93,14 +125,30 @@ }, "notice": { "default": { - "value": "1px solid {sds.color.primitive.yellow.500.value}", - "darkValue": "1px solid {sds.color.primitive.yellow.500.darkValue}" + "value": "1px solid {sds.color.primitive.yellow.600.value}", + "darkValue": "1px solid {sds.color.primitive.yellow.600.darkValue}" + }, + "extraThick": { + "value": "4px solid {sds.color.primitive.yellow.600.value}", + "darkValue": "4px solid {sds.color.primitive.yellow.600.darkValue}" + }, + "thick": { + "value": "2px solid {sds.color.primitive.yellow.600.value}", + "darkValue": "2px solid {sds.color.primitive.yellow.600.darkValue}" } }, "positive": { "default": { - "value": "1px solid {sds.color.primitive.green.500.value}", - "darkValue": "1px solid {sds.color.primitive.green.500.darkValue}" + "value": "1px solid {sds.color.primitive.green.600.value}", + "darkValue": "1px solid {sds.color.primitive.green.600.darkValue}" + }, + "extraThick": { + "value": "4px solid {sds.color.primitive.green.600.value}", + "darkValue": "4px solid {sds.color.primitive.green.600.darkValue}" + }, + "thick": { + "value": "2px solid {sds.color.primitive.green.600.value}", + "darkValue": "2px solid {sds.color.primitive.green.600.darkValue}" } } } diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss index a4bfeabf..d759187a 100644 --- a/packages/components/src/common/styles-dictionary/scss/_variables.scss +++ b/packages/components/src/common/styles-dictionary/scss/_variables.scss @@ -22,24 +22,48 @@ $sds-border-base-pressed: 1px dashed #000000; $sds-border-base-pressed-dark: 1px dashed #ffffff; $sds-border-base-table: 1px solid #c3c3c3; $sds-border-base-table-dark: 1px solid #696969; -$sds-border-beta-default: 1px solid #8b54e2; -$sds-border-beta-default-dark: 1px solid #cebef8; -$sds-border-info-default: 1px solid #1a6cef; -$sds-border-info-default-dark: 1px solid #a2c9ff; +$sds-border-beta-default: 1px solid #6526b5; +$sds-border-beta-default-dark: 1px solid #e4dcfc; +$sds-border-beta-extra-thick: 4px solid #6526b5; +$sds-border-beta-extra-thick-dark: 4px solid #e4dcfc; +$sds-border-beta-thick: 2px solid #6526b5; +$sds-border-beta-thick-dark: 2px solid #e4dcfc; +$sds-border-info-default: 1px solid #0041b9; +$sds-border-info-default-dark: 1px solid #cde3ff; +$sds-border-info-extra-thick: 4px solid #0041b9; +$sds-border-info-extra-thick-dark: 4px solid #cde3ff; +$sds-border-info-thick: 2px solid #0041b9; +$sds-border-info-thick-dark: 2px solid #cde3ff; $sds-border-link-dashed: 1px dashed; $sds-border-link-dashed-dark: 1px dashed; $sds-border-link-solid: 1px solid; $sds-border-link-solid-dark: 1px solid; -$sds-border-negative-default: 1px solid #db2131; -$sds-border-negative-default-dark: 1px solid #FF9385; +$sds-border-negative-default: 1px solid #980013; +$sds-border-negative-default-dark: 1px solid #FFBDB3; +$sds-border-negative-extra-thick: 4px solid #980013; +$sds-border-negative-extra-thick-dark: 4px solid #FFBDB3; +$sds-border-negative-thick: 2px solid #980013; +$sds-border-negative-thick-dark: 2px solid #FFBDB3; $sds-border-neutral-default: 1px solid #969696; $sds-border-neutral-default-dark: 1px solid #aaaaaa; +$sds-border-neutral-extra-thick: 4px solid #969696; +$sds-border-neutral-extra-thick-dark: 4px solid #aaaaaa; +$sds-border-neutral-thick: 2px solid #969696; +$sds-border-neutral-thick-dark: 2px solid #aaaaaa; $sds-border-none: none; $sds-border-none-dark: none; -$sds-border-notice-default: 1px solid #da9900; -$sds-border-notice-default-dark: 1px solid #cf8e00; -$sds-border-positive-default: 1px solid #238444; -$sds-border-positive-default-dark: 1px solid #85d898; +$sds-border-notice-default: 1px solid #b77800; +$sds-border-notice-default-dark: 1px solid #efad00; +$sds-border-notice-extra-thick: 4px solid #b77800; +$sds-border-notice-extra-thick-dark: 4px solid #efad00; +$sds-border-notice-thick: 2px solid #b77800; +$sds-border-notice-thick-dark: 2px solid #efad00; +$sds-border-positive-default: 1px solid #105b2b; +$sds-border-positive-default-dark: 1px solid #bcecc5; +$sds-border-positive-extra-thick: 4px solid #105b2b; +$sds-border-positive-extra-thick-dark: 4px solid #bcecc5; +$sds-border-positive-thick: 2px solid #105b2b; +$sds-border-positive-thick-dark: 2px solid #bcecc5; $sds-color-primitive-blue-100: #e2eeff; $sds-color-primitive-blue-100-dark: #002573; $sds-color-primitive-blue-200: #cce1ff; diff --git a/packages/components/src/core/Notification/style.ts b/packages/components/src/core/Notification/style.ts index f318d9af..a8ed8989 100644 --- a/packages/components/src/core/Notification/style.ts +++ b/packages/components/src/core/Notification/style.ts @@ -3,6 +3,7 @@ import styled from "@emotion/styled"; import { CommonThemeProps, fontBody, + getBorders, getCorners, getIconSizes, getSemanticColors, @@ -37,8 +38,8 @@ export const StyledNotification = styled(Alert, { const iconSizes = getIconSizes(props); const semanticColors = getSemanticColors(props); const typography = getTypography(props); + const borders = getBorders(props); - const borderColor = semanticColors?.[intent]?.ornament ?? "black"; const iconColor = semanticColors?.[intent]?.ornament ?? "black"; const backgroundColor = semanticColors?.[intent]?.surfacePrimary ?? "white"; @@ -63,9 +64,8 @@ export const StyledNotification = styled(Alert, { color: ${semanticColors?.base?.textPrimary}; padding: ${spaces?.l}px; align-items: flex-start; - border-left: 5px solid; + border-left: ${borders?.[intent]?.extraThick}; box-shadow: ${shadows?.s}; - border-color: ${borderColor}; .MuiAlert-icon { height: ${iconSizes?.l.height}px; diff --git a/packages/components/src/core/styles/common/SDSAppTheme.ts b/packages/components/src/core/styles/common/SDSAppTheme.ts index c2e50578..76382543 100644 --- a/packages/components/src/core/styles/common/SDSAppTheme.ts +++ b/packages/components/src/core/styles/common/SDSAppTheme.ts @@ -496,27 +496,39 @@ SDSLightAppTheme.borders = { table: `1px solid ${SDSLightAppTheme.colors.gray[300]}`, }, beta: { - default: `1px solid ${SDSLightAppTheme.colors.purple[500]}`, + default: `1px solid ${SDSLightAppTheme.colors.purple[600]}`, + extraThick: `4px solid ${SDSLightAppTheme.colors.purple[600]}`, + thick: `2px solid ${SDSLightAppTheme.colors.purple[600]}`, }, info: { - default: `1px solid ${SDSLightAppTheme.colors.blue[500]}`, + default: `1px solid ${SDSLightAppTheme.colors.blue[600]}`, + extraThick: `4px solid ${SDSLightAppTheme.colors.blue[600]}`, + thick: `2px solid ${SDSLightAppTheme.colors.blue[600]}`, }, link: { dashed: `1px dashed`, solid: `1px solid`, }, negative: { - default: `1px solid ${SDSLightAppTheme.colors.red[500]}`, + default: `1px solid ${SDSLightAppTheme.colors.red[600]}`, + extraThick: `4px solid ${SDSLightAppTheme.colors.red[600]}`, + thick: `2px solid ${SDSLightAppTheme.colors.red[600]}`, }, neutral: { default: `1px solid ${SDSLightAppTheme.colors.gray[500]}`, + extraThick: `4px solid ${SDSLightAppTheme.colors.gray[500]}`, + thick: `2px solid ${SDSLightAppTheme.colors.gray[500]}`, }, none: "none", notice: { - default: `1px solid ${SDSLightAppTheme.colors.yellow[500]}`, + default: `1px solid ${SDSLightAppTheme.colors.yellow[600]}`, + extraThick: `4px solid ${SDSLightAppTheme.colors.yellow[600]}`, + thick: `2px solid ${SDSLightAppTheme.colors.yellow[600]}`, }, positive: { - default: `1px solid ${SDSLightAppTheme.colors.green[500]}`, + default: `1px solid ${SDSLightAppTheme.colors.green[600]}`, + extraThick: `4px solid ${SDSLightAppTheme.colors.green[600]}`, + thick: `2px solid ${SDSLightAppTheme.colors.green[600]}`, }, }; @@ -543,27 +555,39 @@ SDSDarkAppTheme.borders = { table: `1px solid ${SDSDarkAppTheme.colors.gray[300]}`, }, beta: { - default: `1px solid ${SDSDarkAppTheme.colors.purple[500]}`, + default: `1px solid ${SDSDarkAppTheme.colors.purple[600]}`, + extraThick: `4px solid ${SDSDarkAppTheme.colors.purple[600]}`, + thick: `2px solid ${SDSDarkAppTheme.colors.purple[600]}`, }, info: { - default: `1px solid ${SDSDarkAppTheme.colors.blue[500]}`, + default: `1px solid ${SDSDarkAppTheme.colors.blue[600]}`, + extraThick: `4px solid ${SDSDarkAppTheme.colors.blue[600]}`, + thick: `2px solid ${SDSDarkAppTheme.colors.blue[600]}`, }, link: { dashed: `1px dashed`, solid: `1px solid`, }, negative: { - default: `1px solid ${SDSDarkAppTheme.colors.red[500]}`, + default: `1px solid ${SDSDarkAppTheme.colors.red[600]}`, + extraThick: `4px solid ${SDSDarkAppTheme.colors.red[600]}`, + thick: `2px solid ${SDSDarkAppTheme.colors.red[600]}`, }, neutral: { default: `1px solid ${SDSDarkAppTheme.colors.gray[500]}`, + extraThick: `4px solid ${SDSDarkAppTheme.colors.gray[500]}`, + thick: `2px solid ${SDSDarkAppTheme.colors.gray[500]}`, }, none: "none", notice: { - default: `1px solid ${SDSDarkAppTheme.colors.yellow[500]}`, + default: `1px solid ${SDSDarkAppTheme.colors.yellow[600]}`, + extraThick: `4px solid ${SDSDarkAppTheme.colors.yellow[600]}`, + thick: `2px solid ${SDSDarkAppTheme.colors.yellow[600]}`, }, positive: { - default: `1px solid ${SDSDarkAppTheme.colors.green[500]}`, + default: `1px solid ${SDSDarkAppTheme.colors.green[600]}`, + extraThick: `4px solid ${SDSDarkAppTheme.colors.green[600]}`, + thick: `2px solid ${SDSDarkAppTheme.colors.green[600]}`, }, }; diff --git a/packages/components/src/core/styles/common/types.ts b/packages/components/src/core/styles/common/types.ts index c4cc5682..495f992d 100644 --- a/packages/components/src/core/styles/common/types.ts +++ b/packages/components/src/core/styles/common/types.ts @@ -280,6 +280,8 @@ export interface Border { open?: string; focused?: string; selected?: string; + thick?: string; + extraThick?: string; } export interface Borders {