diff --git a/packages/styles/components/_c.text-input.scss b/packages/styles/components/_c.text-input.scss index ca563b3f3..a8d508dcd 100644 --- a/packages/styles/components/_c.text-input.scss +++ b/packages/styles/components/_c.text-input.scss @@ -12,7 +12,7 @@ border: get-border("s") solid $color-input-border; color: $color-input-text; background-color: $color-input-background; - border-radius: get-border-radius("m"); + border-radius: $input-border-radius; &::placeholder { margin: 0; diff --git a/packages/styles/settings-tools/_s.text-input.scss b/packages/styles/settings-tools/_s.text-input.scss index 96676a707..23d9c95fb 100644 --- a/packages/styles/settings-tools/_s.text-input.scss +++ b/packages/styles/settings-tools/_s.text-input.scss @@ -1,19 +1,26 @@ @use "sass:math"; +// Preset +$preset-zodio: false; +@if $preset == "zodio" { + $preset-zodio: true; +} +// Variables $input-border-width: 0.0625rem; // get-border('s'); - $input-sizes: ( "s": ( - "font-size": "04", + "font-size": if($preset-zodio, "05", "04"), "line-height": "m", - "padding-v": math.div($mu075, 2), - "padding-h": $mu050 - $input-border-width, + "padding-v": if($preset-zodio, $mu025, math.div($mu075, 2)), + "padding-h": + if($preset-zodio, px-to-rem(15), ($mu050 - $input-border-width)), ), "m": ( "font-size": "05", "line-height": "m", - "padding-v": $mu075, - "padding-h": $mu075 - $input-border-width, + "padding-v": if($preset-zodio, $mu100, $mu075), + "padding-h": + if($preset-zodio, px-to-rem(15), ($mu075 - $input-border-width)), ), ); $input-icon-sizes: ( @@ -32,6 +39,8 @@ $input-icon-sizes: ( ); $input-default-size: map-get($input-sizes, "m"); $input-icon-default-size: map-get($input-icon-sizes, "m"); +// Zodio properties +$input-border-radius: if($preset-zodio, null, get-border-radius("m")); @mixin set-input-size($sizeProps) { $padding-v: map-get($sizeProps, "padding-v"); diff --git a/packages/tokens/build/zodio/css/_variables.scss b/packages/tokens/build/zodio/css/_variables.scss index 528620bdb..360ca3fce 100644 --- a/packages/tokens/build/zodio/css/_variables.scss +++ b/packages/tokens/build/zodio/css/_variables.scss @@ -357,7 +357,7 @@ $color-font-danger: var(--color-font-danger, #c61112); $color-heading-underline-default: var(--color-heading-underline-default, #927549); $color-heading-underline-lightest: var(--color-heading-underline-lightest, #f1e7d8); $color-hero-cover-background: var(--color-hero-cover-background, #191919); -$color-input-text: var(--color-input-text, #191919); +$color-input-text: var(--color-input-text, #000000); $color-input-border: var(--color-input-border, #666666); $color-input-placeholder: var(--color-input-placeholder, #666666); $color-input-background: var(--color-input-background, #ffffff); @@ -365,9 +365,9 @@ $color-input-disabled-background: var(--color-input-disabled-background, #cccccc $color-input-disabled-border: var(--color-input-disabled-border, #cccccc); $color-input-disabled-icon: var(--color-input-disabled-icon, #666666); $color-input-disabled-label: var(--color-input-disabled-label, #808080); -$color-input-hover-border: var(--color-input-hover-border, #191919); +$color-input-hover-border: var(--color-input-hover-border, #000000); $color-input-focus-border: var(--color-input-focus-border, #0b96cc); -$color-input-valid-border: var(--color-input-valid-border, #46a610); +$color-input-valid-border: var(--color-input-valid-border, #188803); $color-input-valid-hover-border: var(--color-input-valid-hover-border, #035010); $color-input-invalid-border: var(--color-input-invalid-border, #c61112); $color-input-invalid-hover-border: var(--color-input-invalid-hover-border, #530000); diff --git a/packages/tokens/build/zodio/css/root.scss b/packages/tokens/build/zodio/css/root.scss index d05a097c2..6dbfa19fa 100644 --- a/packages/tokens/build/zodio/css/root.scss +++ b/packages/tokens/build/zodio/css/root.scss @@ -279,9 +279,9 @@ --color-input-invalid-hover-border: var(--color-danger-800); --color-input-invalid-border: var(--color-danger-600); --color-input-valid-hover-border: var(--color-success-800); - --color-input-valid-border: var(--color-success-500); + --color-input-valid-border: var(--color-success-600); --color-input-focus-border: var(--color-secondary-blue-500); - --color-input-hover-border: var(--color-grey-900); + --color-input-hover-border: var(--color-grey-999); --color-input-disabled-label: var(--color-grey-500); --color-input-disabled-icon: var(--color-grey-600); --color-input-disabled-border: var(--color-grey-200); @@ -289,7 +289,7 @@ --color-input-background: var(--color-grey-000); --color-input-placeholder: var(--color-grey-600); --color-input-border: var(--color-grey-600); - --color-input-text: var(--color-grey-900); + --color-input-text: var(--color-grey-999); --color-hero-cover-background: var(--color-grey-900); --color-heading-underline-lightest: var(--color-primary-01-200); --color-heading-underline-default: var(--color-primary-01-500); diff --git a/packages/tokens/build/zodio/js/tokens.js b/packages/tokens/build/zodio/js/tokens.js index f0d92138e..442682cf9 100644 --- a/packages/tokens/build/zodio/js/tokens.js +++ b/packages/tokens/build/zodio/js/tokens.js @@ -360,7 +360,7 @@ export const ColorFontDanger = "#c61112"; export const ColorHeadingUnderlineDefault = "#927549"; export const ColorHeadingUnderlineLightest = "#f1e7d8"; export const ColorHeroCoverBackground = "#191919"; -export const ColorInputText = "#191919"; +export const ColorInputText = "#000000"; export const ColorInputBorder = "#666666"; export const ColorInputPlaceholder = "#666666"; export const ColorInputBackground = "#ffffff"; @@ -368,9 +368,9 @@ export const ColorInputDisabledBackground = "#cccccc"; export const ColorInputDisabledBorder = "#cccccc"; export const ColorInputDisabledIcon = "#666666"; export const ColorInputDisabledLabel = "#808080"; -export const ColorInputHoverBorder = "#191919"; +export const ColorInputHoverBorder = "#000000"; export const ColorInputFocusBorder = "#0b96cc"; -export const ColorInputValidBorder = "#46a610"; +export const ColorInputValidBorder = "#188803"; export const ColorInputValidHoverBorder = "#035010"; export const ColorInputInvalidBorder = "#c61112"; export const ColorInputInvalidHoverBorder = "#530000"; diff --git a/packages/tokens/build/zodio/js/tokensObject.js b/packages/tokens/build/zodio/js/tokensObject.js index b3423fc57..d53496da8 100644 --- a/packages/tokens/build/zodio/js/tokensObject.js +++ b/packages/tokens/build/zodio/js/tokensObject.js @@ -7764,11 +7764,11 @@ module.exports = { }, "input": { "text": { - "value": "#191919", + "value": "#000000", "filePath": "packages/tokens/src/tokens/zodio/color/input.json", "isSource": true, "original": { - "value": "{color.grey.900.value}" + "value": "{color.grey.999.value}" }, "name": "ColorInputText", "attributes": { @@ -7927,11 +7927,11 @@ module.exports = { }, "hover": { "border": { - "value": "#191919", + "value": "#000000", "filePath": "packages/tokens/src/tokens/zodio/color/input.json", "isSource": true, "original": { - "value": "{color.grey.900.value}" + "value": "{color.grey.999.value}" }, "name": "ColorInputHoverBorder", "attributes": { @@ -7973,11 +7973,11 @@ module.exports = { }, "valid": { "border": { - "value": "#46a610", + "value": "#188803", "filePath": "packages/tokens/src/tokens/zodio/color/input.json", "isSource": true, "original": { - "value": "{color.success.500.value}" + "value": "{color.success.600.value}" }, "name": "ColorInputValidBorder", "attributes": { diff --git a/packages/tokens/build/zodio/scss/_tokens.scss b/packages/tokens/build/zodio/scss/_tokens.scss index c2258cb26..9692bb90e 100644 --- a/packages/tokens/build/zodio/scss/_tokens.scss +++ b/packages/tokens/build/zodio/scss/_tokens.scss @@ -361,7 +361,7 @@ $color-font-danger: #c61112 !default; $color-heading-underline-default: #927549 !default; $color-heading-underline-lightest: #f1e7d8 !default; $color-hero-cover-background: #191919 !default; -$color-input-text: #191919 !default; +$color-input-text: #000000 !default; $color-input-border: #666666 !default; $color-input-placeholder: #666666 !default; $color-input-background: #ffffff !default; @@ -369,9 +369,9 @@ $color-input-disabled-background: #cccccc !default; $color-input-disabled-border: #cccccc !default; $color-input-disabled-icon: #666666 !default; $color-input-disabled-label: #808080 !default; -$color-input-hover-border: #191919 !default; +$color-input-hover-border: #000000 !default; $color-input-focus-border: #0b96cc !default; -$color-input-valid-border: #46a610 !default; +$color-input-valid-border: #188803 !default; $color-input-valid-hover-border: #035010 !default; $color-input-invalid-border: #c61112 !default; $color-input-invalid-hover-border: #530000 !default; diff --git a/packages/tokens/src/tokens/zodio/color/input.json b/packages/tokens/src/tokens/zodio/color/input.json index 4a6ee67d8..c5800db2c 100644 --- a/packages/tokens/src/tokens/zodio/color/input.json +++ b/packages/tokens/src/tokens/zodio/color/input.json @@ -2,7 +2,7 @@ "color": { "input": { "text": { - "value": "{color.grey.900.value}" + "value": "{color.grey.999.value}" }, "border": { "value": "{color.grey.600.value}" @@ -29,7 +29,7 @@ }, "hover": { "border": { - "value": "{color.grey.900.value}" + "value": "{color.grey.999.value}" } }, "focus": { @@ -39,7 +39,7 @@ }, "valid": { "border": { - "value": "{color.success.500.value}" + "value": "{color.success.600.value}" }, "hover": { "border": {