diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css index 5e2b7af34..daa505cb7 100644 --- a/packages/components/src/common/styles-dictionary/css/variables.css +++ b/packages/components/src/common/styles-dictionary/css/variables.css @@ -1,20 +1,22 @@ :root { - --sds-borders-error-400: 1px solid #fef2f2; - --sds-borders-gray-100: 1px solid #f8f8f8; - --sds-borders-gray-200: 1px solid #eaeaea; - --sds-borders-gray-300: 1px solid #cccccc; - --sds-borders-gray-400: 1px solid #999999; - --sds-borders-gray-500: 1px solid #767676; - --sds-borders-gray-dashed: 2px dashed #999999; + --sds-borders-negative-400: 1px solid #dc132c; + --sds-borders-base-100: 1px solid #f8f8f8; + --sds-borders-base-200: 1px solid #eaeaea; + --sds-borders-base-300: 1px solid #cccccc; + --sds-borders-base-400: 1px solid #999999; + --sds-borders-base-500: 1px solid #767676; + --sds-borders-base-dashed: 2px dashed #999999; --sds-borders-link-dashed: 1px dashed; --sds-borders-link-solid: 1px solid; - --sds-borders-primary-300: 1px solid #a6c9ff; - --sds-borders-primary-400: 1px solid #0b68f8; - --sds-borders-primary-500: 1px solid #0142a4; - --sds-borders-primary-600: 1px solid #002660; - --sds-borders-primary-dashed: 2px dashed #0b68f8; - --sds-borders-success-400: 1px solid #ecf5f0; - --sds-borders-warning-400: 1px solid #fcf6ec; + --sds-borders-accent-300: 1px solid #a6c9ff; + --sds-borders-accent-400: 1px solid #0b68f8; + --sds-borders-accent-500: 1px solid #0142a4; + --sds-borders-accent-600: 1px solid #002660; + --sds-borders-accent-dashed: 2px dashed #0b68f8; + --sds-borders-info-400: 1px solid #0b68f8; + --sds-borders-beta-400: 1px solid #7a41ce; + --sds-borders-positive-400: 1px solid #3cb371; + --sds-borders-notice-400: 1px solid #f5a623; --sds-color-primitive-blue-100: #f5f9ff; --sds-color-primitive-blue-200: #e9f1ff; --sds-color-primitive-blue-300: #a6c9ff; 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 42bd46866..0855e38b4 100644 --- a/packages/components/src/common/styles-dictionary/design-tokens/borders.json +++ b/packages/components/src/common/styles-dictionary/design-tokens/borders.json @@ -1,10 +1,10 @@ { "sds": { "borders": { - "error": { - "400": { "value": "1px solid {sds.color.primitive.red.100.value}" } + "negative": { + "400": { "value": "1px solid {sds.color.primitive.red.400.value}" } }, - "gray": { + "base": { "100": { "value": "1px solid {sds.color.primitive.gray.100.value}" }, "200": { "value": "1px solid {sds.color.primitive.gray.200.value}" }, "300": { "value": "1px solid {sds.color.primitive.gray.300.value}" }, @@ -16,18 +16,24 @@ "dashed": { "value": "1px dashed" }, "solid": { "value": "1px solid" } }, - "primary": { + "accent": { "300": { "value": "1px solid {sds.color.primitive.blue.300.value}" }, "400": { "value": "1px solid {sds.color.primitive.blue.400.value}" }, "500": { "value": "1px solid {sds.color.primitive.blue.500.value}" }, "600": { "value": "1px solid {sds.color.primitive.blue.600.value}" }, "dashed": { "value": "2px dashed {sds.color.primitive.blue.400.value}" } }, - "success": { - "400": { "value": "1px solid {sds.color.primitive.green.100.value}" } + "info": { + "400": { "value": "1px solid {sds.color.primitive.blue.400.value}" } }, - "warning": { - "400": { "value": "1px solid {sds.color.primitive.yellow.100.value}" } + "beta": { + "400": { "value": "1px solid {sds.color.primitive.purple.400.value}" } + }, + "positive": { + "400": { "value": "1px solid {sds.color.primitive.green.400.value}" } + }, + "notice": { + "400": { "value": "1px solid {sds.color.primitive.yellow.400.value}" } } } } diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss index baf2fb840..6c8342cda 100644 --- a/packages/components/src/common/styles-dictionary/scss/_variables.scss +++ b/packages/components/src/common/styles-dictionary/scss/_variables.scss @@ -1,19 +1,21 @@ -$sds-borders-error-400: 1px solid #FEF2F2; -$sds-borders-gray-100: 1px solid #F8F8F8; -$sds-borders-gray-200: 1px solid #EAEAEA; -$sds-borders-gray-300: 1px solid #CCCCCC; -$sds-borders-gray-400: 1px solid #999999; -$sds-borders-gray-500: 1px solid #767676; -$sds-borders-gray-dashed: 2px dashed #999999; +$sds-borders-negative-400: 1px solid #DC132C; +$sds-borders-base-100: 1px solid #F8F8F8; +$sds-borders-base-200: 1px solid #EAEAEA; +$sds-borders-base-300: 1px solid #CCCCCC; +$sds-borders-base-400: 1px solid #999999; +$sds-borders-base-500: 1px solid #767676; +$sds-borders-base-dashed: 2px dashed #999999; $sds-borders-link-dashed: 1px dashed; $sds-borders-link-solid: 1px solid; -$sds-borders-primary-300: 1px solid #A6C9FF; -$sds-borders-primary-400: 1px solid #0B68F8; -$sds-borders-primary-500: 1px solid #0142A4; -$sds-borders-primary-600: 1px solid #002660; -$sds-borders-primary-dashed: 2px dashed #0B68F8; -$sds-borders-success-400: 1px solid #ECF5F0; -$sds-borders-warning-400: 1px solid #FCF6EC; +$sds-borders-accent-300: 1px solid #A6C9FF; +$sds-borders-accent-400: 1px solid #0B68F8; +$sds-borders-accent-500: 1px solid #0142A4; +$sds-borders-accent-600: 1px solid #002660; +$sds-borders-accent-dashed: 2px dashed #0B68F8; +$sds-borders-info-400: 1px solid #0B68F8; +$sds-borders-beta-400: 1px solid #7A41CE; +$sds-borders-positive-400: 1px solid #3CB371; +$sds-borders-notice-400: 1px solid #F5A623; $sds-color-primitive-blue-100: #F5F9FF; $sds-color-primitive-blue-200: #E9F1FF; $sds-color-primitive-blue-300: #A6C9FF;