From a2b552c02dfc527d22f14cf0e48df28782fd0085 Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Wed, 15 May 2024 16:52:53 +0300
Subject: [PATCH] refactor: revision of ChipCarousel-Pagination design tokens
(#3052)
---
styles/css/core/variables.css | 10 +++-------
styles/css/themes/light/variables.css | 8 ++++----
tokens/src/core/components/ColorPicker.json | 4 ++--
tokens/src/core/components/Container.json | 2 +-
tokens/src/core/components/DataTable.json | 2 +-
tokens/src/core/components/Form/size.json | 10 +++-------
tokens/src/core/components/Nav.json | 3 ---
tokens/src/core/components/Pagination.json | 4 ----
tokens/src/core/global/spacing.json | 4 ++--
tokens/src/themes/light/components/DataTable.json | 2 +-
tokens/src/themes/light/components/Form/color.json | 8 ++++----
tokens/src/themes/light/components/Form/elevation.json | 2 +-
tokens/src/themes/light/components/Form/other.json | 6 +++---
tokens/src/themes/light/global/color.json | 4 ++--
14 files changed, 27 insertions(+), 42 deletions(-)
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
index 8111709a07..b6709119c3 100644
--- a/styles/css/core/variables.css
+++ b/styles/css/core/variables.css
@@ -1,7 +1,7 @@
/**
* IMPORTANT: This file is the result of assembling design tokens
* Do not edit directly
- * Generated on Mon, 13 May 2024 08:42:31 GMT
+ * Generated on Wed, 15 May 2024 08:37:24 GMT
*/
:root {
@@ -148,7 +148,6 @@
--pgn-spacing-popover-icon-margin-right: .5rem;
--pgn-spacing-popover-header-padding-x: 1rem;
--pgn-spacing-popover-header-padding-y: .5rem;
- --pgn-spacing-pagination-margin-x: .5rem;
--pgn-spacing-pagination-padding-x-lg: 1.5rem;
--pgn-spacing-pagination-padding-x-sm: .6rem;
--pgn-spacing-pagination-padding-x-base: 1rem;
@@ -306,7 +305,6 @@
--pgn-size-popover-icon-height: 1rem;
--pgn-size-popover-max-width: 480px;
--pgn-size-pagination-focus-outline: 0;
- --pgn-size-pagination-focus-border-width: .125rem;
--pgn-size-pagination-toggle-border-sm: .25rem;
--pgn-size-pagination-toggle-border-base: .3125rem;
--pgn-size-pagination-reduced-dropdown-min-width: 6rem;
@@ -363,9 +361,9 @@
--pgn-size-data-table-layout-sidebar-width: 12rem;
--pgn-size-data-table-dropdown-pagination-min-width: 6rem;
--pgn-size-data-table-dropdown-pagination-max-height: 60vh;
- --pgn-size-data-table-border: 1px;
+ --pgn-size-data-table-border: 2px;
--pgn-size-container-max-width-xl: 1440px;
- --pgn-size-container-max-width-lg: 1196px;
+ --pgn-size-container-max-width-lg: 1192px;
--pgn-size-container-max-width-md: 952px;
--pgn-size-container-max-width-sm: 708px;
--pgn-size-container-max-width-xs: 464px;
@@ -482,7 +480,6 @@
--pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y);
--pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base);
--pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2);
- --pgn-spacing-nav-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2);
--pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem;
--pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem;
--pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left);
@@ -537,7 +534,6 @@
--pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus);
--pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width);
--pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base);
- --pgn-size-form-control-select-border-width-focus: var(--pgn-size-form-input-width-focus);
--pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2);
--pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4);
--pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75);
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
index b2abf4595e..1bae2b7833 100644
--- a/styles/css/themes/light/variables.css
+++ b/styles/css/themes/light/variables.css
@@ -1,7 +1,7 @@
/**
* IMPORTANT: This file is the result of assembling design tokens
* Do not edit directly
- * Generated on Mon, 13 May 2024 08:42:31 GMT
+ * Generated on Wed, 15 May 2024 07:58:56 GMT
*/
:root {
@@ -253,7 +253,6 @@
--pgn-elevation-form-control-indicator-active: none;
--pgn-elevation-form-control-indicator-checked-focus: 0 0 0 4px rgba(0, 0, 0, .1);
--pgn-elevation-form-control-indicator-checked-base: none;
- --pgn-elevation-form-input-focus: none;
--pgn-elevation-form-input-base: none;
--pgn-elevation-code-kbd-box-shadow: none;
--pgn-elevation-btn-box-shadow-active: none;
@@ -474,7 +473,6 @@
--pgn-color-dropdown-link-base: var(--pgn-color-gray-900);
--pgn-color-dropdown-divider-bg: var(--pgn-color-gray-100);
--pgn-color-dropdown-border: #00000026;
- --pgn-color-data-table-border: var(--pgn-color-gray-200);
--pgn-color-data-table-bg-is-loading: #FFFFFFB3;
--pgn-color-code-pre: var(--pgn-color-gray-900);
--pgn-color-code-kbd-bg: var(--pgn-color-gray-700);
@@ -613,7 +611,6 @@
--pgn-elevation-icon-button-box-shadow-primary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
--pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-primary-base);
--pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
- --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
--pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base);
--pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base);
--pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm);
@@ -934,6 +931,7 @@
--pgn-color-dropdown-bg: var(--pgn-color-bg-base);
--pgn-color-dropdown-header: var(--pgn-color-gray-500);
--pgn-color-dropdown-text: var(--pgn-color-body-base);
+ --pgn-color-data-table-border: var(--pgn-color-light-300);
--pgn-color-data-table-bg-base: var(--pgn-color-bg-base);
--pgn-color-chip-label-dark: var(--pgn-color-chip-outline-dark);
--pgn-color-chip-label-base: var(--pgn-color-primary-700);
@@ -1140,6 +1138,7 @@
--pgn-color-bg-active: var(--pgn-color-primary-500);
--pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow);
--pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
+ --pgn-elevation-form-input-focus: 0 0 0 1px var(--pgn-color-primary-500);
--pgn-elevation-dropzone-active: inset 0 0 0 2px var(--pgn-color-primary-500);
--pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text);
--pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base);
@@ -1477,6 +1476,7 @@
--pgn-other-content-form-control-radio-indicator-icon-checked-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23178253FF'/%3e%3c/svg%3e");
--pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: url("data:image/svg+xml,");
--pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: url("data:image/svg+xml,");
+ --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
--pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus);
--pgn-elevation-dropzone-error: inset 0 0 0 2px var(--pgn-color-danger-300);
--pgn-elevation-dropzone-focus: inset 0 0 0 2px var(--pgn-color-info-300);
diff --git a/tokens/src/core/components/ColorPicker.json b/tokens/src/core/components/ColorPicker.json
index 0aa4c45b1e..2dd4803426 100644
--- a/tokens/src/core/components/ColorPicker.json
+++ b/tokens/src/core/components/ColorPicker.json
@@ -1,8 +1,8 @@
{
"size": {
"color-picker": {
- "sm": { "value": "2rem", "source": "$picker-size-sm", "type": "dimension"},
- "md": { "value": "calc(1.3333em + 1.125rem + 2px)", "source": "$picker-size-md", "type": "dimension"}
+ "sm": { "value": "2rem", "type": "dimension", "source": "$picker-size-sm" },
+ "md": { "value": "calc(1.3333em + 1.125rem + 2px)", "type": "dimension", "source": "$picker-size-md" }
}
}
}
diff --git a/tokens/src/core/components/Container.json b/tokens/src/core/components/Container.json
index d71dbf1756..4f9b676d6a 100644
--- a/tokens/src/core/components/Container.json
+++ b/tokens/src/core/components/Container.json
@@ -5,7 +5,7 @@
"xs": { "value": "464px", "type": "dimension", "source": "$max-width-xs" },
"sm": { "value": "708px", "type": "dimension", "source": "$max-width-sm" },
"md": { "value": "952px", "type": "dimension", "source": "$max-width-md" },
- "lg": { "value": "1196px", "type": "dimension", "source": "$max-width-lg" },
+ "lg": { "value": "1192px", "type": "dimension", "source": "$max-width-lg" },
"xl": { "value": "1440px", "type": "dimension", "source": "$max-width-xl" }
}
}
diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json
index b6371f8d2c..9c6ba9cea6 100644
--- a/tokens/src/core/components/DataTable.json
+++ b/tokens/src/core/components/DataTable.json
@@ -1,7 +1,7 @@
{
"size": {
"data-table": {
- "border": { "value": "1px", "type": "dimension", "source": "$data-table-border" },
+ "border": { "value": "2px", "type": "dimension", "source": "$data-table-border" },
"dropdown": {
"pagination": {
"max-height": { "value": "60vh", "type": "dimension", "source": "$data-table-pagination-dropdown-max-height" },
diff --git a/tokens/src/core/components/Form/size.json b/tokens/src/core/components/Form/size.json
index 54942c288f..695bfd149a 100644
--- a/tokens/src/core/components/Form/size.json
+++ b/tokens/src/core/components/Form/size.json
@@ -57,7 +57,7 @@
}
},
"control": {
- "indicator": {
+ "indicator": {
"base": { "value": "1.25rem", "type": "dimension", "source": "$custom-control-indicator-size" },
"bg": { "value": "100%", "type": "percentage", "source": "$custom-control-indicator-bg-size" },
"border": {
@@ -101,7 +101,8 @@
"icon": {
"value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}",
"type": "dimension",
- "source": "$custom-select-feedback-icon-size" }
+ "source": "$custom-select-feedback-icon-size"
+ }
},
"border": {
"width": {
@@ -109,11 +110,6 @@
"value": "{size.form.input.width.border}",
"type": "dimension",
"source": "$custom-select-border-width"
- },
- "focus": {
- "value": "{size.form.input.width.focus}",
- "type": "dimension",
- "source": "$custom-select-focus-width"
}
},
"radius": {
diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json
index d6a9244578..4f4de47f4c 100644
--- a/tokens/src/core/components/Nav.json
+++ b/tokens/src/core/components/Nav.json
@@ -46,9 +46,6 @@
"x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" }
},
"distance-to-border": { "value": "4px", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" }
- },
- "divider": {
- "margin-y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$nav-divider-margin-y" }
}
}
}
diff --git a/tokens/src/core/components/Pagination.json b/tokens/src/core/components/Pagination.json
index f2df597042..691f063515 100644
--- a/tokens/src/core/components/Pagination.json
+++ b/tokens/src/core/components/Pagination.json
@@ -20,9 +20,6 @@
"sm": { "value": ".6rem", "type": "dimension", "source": "$pagination-padding-x-sm" },
"lg": { "value": "1.5rem", "type": "dimension", "source": "$pagination-padding-x-lg" }
}
- },
- "margin": {
- "x": { "value": ".5rem", "type": "dimension", "source": "$pagination-margin-x" }
}
}
},
@@ -62,7 +59,6 @@
}
},
"focus": {
- "border-width": { "value": ".125rem", "type": "dimension", "source": "$pagination-focus-border-width" },
"outline": { "value": "0", "type": "dimension", "source": "$pagination-focus-outline" }
}
}
diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json
index 0e4cbb5e76..62a4bb25d2 100644
--- a/tokens/src/core/global/spacing.json
+++ b/tokens/src/core/global/spacing.json
@@ -8,11 +8,11 @@
"2": { "value": "calc({spacing.spacer.base} * .5)", "type": "dimension", "description": "Space value of level 2" },
"2,5": { "value": "calc({spacing.spacer.base} * .75)", "type": "dimension", "description": "Space value of level 2.5" },
"3": { "value": "{spacing.spacer.base}", "type": "dimension", "description": "Space value of level 3" },
- "3,5": { "value": "calc({spacing.spacer.base} * 1.25)", "type": "dimension", "description": "Space value of level 3.5"},
+ "3,5": { "value": "calc({spacing.spacer.base} * 1.25)", "type": "dimension", "description": "Space value of level 3.5" },
"4": { "value": "calc({spacing.spacer.base} * 1.5)", "type": "dimension", "description": "Space value of level 4" },
"4,5": { "value": "calc({spacing.spacer.base} * 2)", "type": "dimension", "description": "Space value of level 4.5" },
"5": { "value": "calc({spacing.spacer.base} * 3)", "type": "dimension", "description": "Space value of level 5" },
- "5,5": { "value": "calc({spacing.spacer.base} * 4)", "type": "dimension", "description": "Space value of level 5.5"},
+ "5,5": { "value": "calc({spacing.spacer.base} * 4)", "type": "dimension", "description": "Space value of level 5.5" },
"6": { "value": "calc({spacing.spacer.base} * 5)", "type": "dimension", "description": "Space value of level 6" }
},
"label": {
diff --git a/tokens/src/themes/light/components/DataTable.json b/tokens/src/themes/light/components/DataTable.json
index 9071d6457f..bf26918ac5 100644
--- a/tokens/src/themes/light/components/DataTable.json
+++ b/tokens/src/themes/light/components/DataTable.json
@@ -15,7 +15,7 @@
]
}
},
- "border": { "value": "{color.gray.200}", "type": "color", "source": "$data-table-border-color" }
+ "border": { "value": "{color.light.300}", "type": "color", "source": "$data-table-border-color" }
}
},
"elevation": {
diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json
index 9568b4d677..c477d6541c 100644
--- a/tokens/src/themes/light/components/Form/color.json
+++ b/tokens/src/themes/light/components/Form/color.json
@@ -30,7 +30,7 @@
"border": {
"value": "{color.gray.700}", "type": "color", "source": "$custom-control-indicator-border-color"
},
- "bg": {
+ "bg": {
"base": {
"value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-control-indicator-bg"
},
@@ -68,7 +68,7 @@
}
}
},
- "active": {
+ "active": {
"base": {
"value": "{color.active}", "type": "color", "source": "$custom-control-indicator-active-color"
},
@@ -88,7 +88,7 @@
"value": "{color.disabled}", "type": "color", "source": "$custom-control-label-disabled-color"
},
"floating": {
- "text": {
+ "text": {
"value": "{color.form.input.bg.base}",
"type": "color",
"source": "$form-control-floating-label-text-bg",
@@ -217,7 +217,7 @@
"value": "{color.form.feedback.valid}",
"type": "color",
"source": "$form-feedback-tooltip-valid-color",
- "modify": [{"type": "color-yiq"}]
+ "modify": [{ "type": "color-yiq" }]
},
"bg": {
"valid": {
diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json
index db58f17b7b..49f3b256c3 100644
--- a/tokens/src/themes/light/components/Form/elevation.json
+++ b/tokens/src/themes/light/components/Form/elevation.json
@@ -4,7 +4,7 @@
"input": {
"base": { "value": "none", "type": "shadow", "source": "$input-box-shadow" },
"focus": {
- "value": "none",
+ "value": "0 0 0 1px {color.primary.500}",
"type": "shadow",
"source": "$input-focus-box-shadow"
}
diff --git a/tokens/src/themes/light/components/Form/other.json b/tokens/src/themes/light/components/Form/other.json
index c1d2727b88..3e4876afbe 100644
--- a/tokens/src/themes/light/components/Form/other.json
+++ b/tokens/src/themes/light/components/Form/other.json
@@ -52,21 +52,21 @@
"type": "file",
"source": "$custom-radio-indicator-icon-checked",
"outputReferences": false,
- "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23"}]
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
},
"valid": {
"value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")",
"type": "file",
"source": "$custom-radio-indicator-icon-valid-checked",
"outputReferences": false,
- "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23"}]
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
},
"invalid": {
"value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")",
"type": "file",
"source": "$custom-radio-indicator-icon-invalid-checked",
"outputReferences": false,
- "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23"}]
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
}
}
}
diff --git a/tokens/src/themes/light/global/color.json b/tokens/src/themes/light/global/color.json
index 24b93768d6..5cb19068bb 100644
--- a/tokens/src/themes/light/global/color.json
+++ b/tokens/src/themes/light/global/color.json
@@ -153,7 +153,7 @@
"value": "{color.primary.base}",
"type": "color",
"source": "$primary-300",
- "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50"}],
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }],
"description": "Primary color of level 300.",
"actions": {
"default": "{color.action.default.primary.300}"
@@ -602,7 +602,7 @@
"value": "{color.info.base}",
"type": "color",
"source": "$info-800",
- "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25"}],
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }],
"description": "Info color of level 800.",
"actions": {
"default": "{color.action.default.info.800}"