Skip to content

Commit

Permalink
feat: update css variables (MGPFE-2127) (#533)
Browse files Browse the repository at this point in the history
* feat: update css variables

* feat: change some css variables to the newest
  • Loading branch information
sonya0504 authored Jan 3, 2025
1 parent 2225265 commit 2f9d4bc
Show file tree
Hide file tree
Showing 8 changed files with 128 additions and 132 deletions.
2 changes: 1 addition & 1 deletion scripts/figma-to-css.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import dotenv from 'dotenv';
dotenv.config();
const fileName = fileURLToPath(import.meta.url);
const figmaToken = process.env.FIGMA_TOKEN;
const figmaFileId = process.env.FIGMA_FILE_ID;
const figmaUrl = 'https://api.figma.com/v1';
const figmaFileId = 'AuIoOW4ZpMZDye6lZp35sq';
const indentation = ' ';

const saveFile = (name, content) => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/atoms/UiCheckbox/UiCheckbox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,7 @@ defineExpose({ input });
$element,
$color: var(--color-border-strong),
$width: 2px,
$radius: var(--border-radius-checkbox),
$radius: var(--border-radius-button),
$transition: (
border-color 150ms ease-in-out,
background-color 150ms ease-in-out
Expand Down
4 changes: 2 additions & 2 deletions src/components/atoms/UiHeading/UiHeading.vue
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ const headingClass = computed(() => `ui-heading--h${props.level}`);
@for $i from 1 through 6 {
&--h#{$i} {
font: functions.var($element, font, var(--font-h#{$i}));
letter-spacing: functions.var($element, letter-spacing, var(--letter-spacing-h#{$i}));
font: functions.var($element, font, var(--font-heading-style-#{$i}));
letter-spacing: functions.var($element, letter-spacing, var(--letter-spacing-heading-style-#{$i}));
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/atoms/UiIcon/UiIcon.vue
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const file = computed<Component>(() => {
width: functions.var($element, size, functions.var($element, width, 1.5rem));
height: functions.var($element, size, functions.var($element, height, 1.5rem));
fill: functions.var($element, color);
fill: functions.var($element, color, var(--color-icon-primary));
&.rtl-supported {
[dir="rtl"] & {
Expand Down
88 changes: 44 additions & 44 deletions src/styles/variables/colors.scss
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
// Auto-generated file by update:css-variables script. Do not edit manually
html {
--color-abdominal-model-fill-hover: var(--color-blue-600);
--color-abdominal-model-fill-selection-hover: var(--color-gray-800);
--color-abdominal-model-fill-selection: var(--color-gray-900);
--color-abdominal-model-fill-selection-hover: var(--color-blue-900);
--color-abdominal-model-fill-selection: var(--color-blue-800);
--color-abdominal-model-fill: var(--color-blue-500);
--color-abdominal-model-outline: var(--color-blue-700);
--color-backdrop: var(--color-gray-800);
--color-background-action-active: var(--color-blue-800);
--color-background-action-hover: var(--color-blue-700);
--color-background-action: var(--color-blue-600);
--color-background-brand: var(--color-blue-100);
--color-background-action-active: var(--color-green-800);
--color-background-action-hover: var(--color-green-700);
--color-background-action: var(--color-green-600);
--color-background-brand: var(--color-blue-600);
--color-background-disabled: var(--color-gray-200);
--color-background-error: var(--color-red-50);
--color-background-info: var(--color-blue-50);
--color-background-selection-active: var(--color-gray-700);
--color-background-selection-hover: var(--color-gray-800);
--color-background-selection: var(--color-gray-900);
--color-background-selection-active: var(--color-blue-800);
--color-background-selection-hover: var(--color-blue-700);
--color-background-selection: var(--color-blue-600);
--color-background-subtle: var(--color-gray-50);
--color-background-success: var(--color-green-50);
--color-background-warning: var(--color-yellow-50);
Expand All @@ -26,9 +26,9 @@ html {
--color-body-model-strong-highlight: var(--color-blue-400);
--color-body-model-subtle-highlight: var(--color-blue-200);
--color-border-divider: var(--color-gray-100);
--color-border-error-strong-active: var(--color-red-800);
--color-border-error-strong-hover: var(--color-red-700);
--color-border-error-strong: var(--color-red-600);
--color-border-error-strong-active: var(--color-red-700);
--color-border-error-strong-hover: var(--color-red-600);
--color-border-error-strong: var(--color-red-500);
--color-border-error-subtle: var(--color-red-300);
--color-border-focus-dark: var(--color-blue-500);
--color-border-focus-light: var(--color-white);
Expand All @@ -40,50 +40,50 @@ html {
--color-border-subtle: var(--color-gray-200);
--color-border-success-subtle: var(--color-green-300);
--color-border-warning-subtle: var(--color-yellow-300);
--color-chip-background: var(--color-blue-100);
--color-chip-icon-background-active: var(--color-blue-800);
--color-chip-icon-background-hover: var(--color-blue-700);
--color-chip-icon-background: var(--color-blue-600);
--color-chip-background: var(--color-blue-600);
--color-chip-icon-background-active: var(--color-blue-900);
--color-chip-icon-background-hover: var(--color-blue-800);
--color-chip-icon-background: var(--color-blue-700);
--color-chip-icon: var(--color-white);
--color-chip-text: var(--color-gray-900);
--color-chip-text: var(--color-white);
--color-dataviz-diverging-moderately-negative: var(--color-yellow-300);
--color-dataviz-diverging-strongly-negative: var(--color-red-500);
--color-dataviz-diverging-track: var(--color-gray-100);
--color-dataviz-sequential-strong: var(--color-blue-600);
--color-dataviz-sequential-weak: var(--color-gray-600);
--color-icon-disabled: var(--color-gray-400);
--color-icon-error: var(--color-red-600);
--color-icon-info: var(--color-blue-700);
--color-icon-disabled: var(--color-gray-300);
--color-icon-error: var(--color-red-500);
--color-icon-info: var(--color-blue-500);
--color-icon-negative: var(--color-white);
--color-icon-on-action: var(--color-white);
--color-icon-on-brand-active: var(--color-blue-800);
--color-icon-on-brand-disabled: var(--color-gray-300);
--color-icon-on-brand-hover: var(--color-blue-700);
--color-icon-on-brand: var(--color-gray-900);
--color-icon-on-brand-active: var(--color-blue-100);
--color-icon-on-brand-disabled: var(--color-blue-400);
--color-icon-on-brand-hover: var(--color-blue-50);
--color-icon-on-brand: var(--color-white);
--color-icon-on-selection: var(--color-white);
--color-icon-primary-active: var(--color-blue-800);
--color-icon-primary-hover: var(--color-blue-700);
--color-icon-primary: var(--color-blue-600);
--color-icon-secondary-active: var(--color-gray-800);
--color-icon-secondary-hover: var(--color-gray-700);
--color-icon-secondary: var(--color-gray-600);
--color-icon-success: var(--color-green-600);
--color-icon-warning: var(--color-yellow-600);
--color-progress-indicator: var(--color-gray-500);
--color-progress-track: var(--color-gray-100);
--color-range-progress-indicator: var(--color-blue-600);
--color-range-thumb-active: var(--color-blue-800);
--color-range-thumb-hover: var(--color-blue-700);
--color-range-thumb: var(--color-blue-600);
--color-regions-fill-hover: var(--color-blue-200);
--color-regions-fill-selection-hover: var(--color-gray-800);
--color-regions-fill-selection: var(--color-gray-900);
--color-icon-success: var(--color-green-500);
--color-icon-warning: var(--color-yellow-500);
--color-progress-indicator: var(--color-green-600);
--color-progress-track: var(--color-gray-200);
--color-range-progress-indicator: var(--color-green-600);
--color-range-thumb-active: var(--color-green-800);
--color-range-thumb-hover: var(--color-green-700);
--color-range-thumb: var(--color-green-600);
--color-regions-fill-hover: var(--color-blue-300);
--color-regions-fill-selection-hover: var(--color-blue-900);
--color-regions-fill-selection: var(--color-blue-800);
--color-regions-fill: var(--color-blue-500);
--color-regions-stroke-selection: var(--color-blue-500);
--color-regions-stroke: var(--color-blue-700);
--color-selectioncontrols-selection-active: var(--color-blue-800);
--color-selectioncontrols-selection-hover: var(--color-blue-700);
--color-selectioncontrols-selection: var(--color-blue-600);
--color-regions-stroke: var(--color-blue-600);
--color-selectioncontrols-selection-active: var(--color-green-700);
--color-selectioncontrols-selection-hover: var(--color-green-600);
--color-selectioncontrols-selection: var(--color-green-500);
--color-skeleton-loader-base: var(--color-gray-100);
--color-skeleton-loader-wave: var(--color-gray-200);
--color-text-action-primary-active: var(--color-blue-800);
Expand All @@ -97,12 +97,12 @@ html {
--color-text-disabled: var(--color-gray-400);
--color-text-error: var(--color-red-600);
--color-text-heading: var(--color-gray-900);
--color-text-info: var(--color-blue-700);
--color-text-info: var(--color-blue-600);
--color-text-on-action: var(--color-white);
--color-text-on-brand-active: var(--color-blue-800);
--color-text-on-brand-disabled: var(--color-gray-300);
--color-text-on-brand-hover: var(--color-blue-700);
--color-text-on-brand: var(--color-gray-900);
--color-text-on-brand-active: var(--color-blue-100);
--color-text-on-brand-disabled: var(--color-blue-400);
--color-text-on-brand-hover: var(--color-blue-50);
--color-text-on-brand: var(--color-white);
--color-text-on-selection: var(--color-white);
--color-text-success: var(--color-green-600);
--color-text-warning: var(--color-yellow-600);
Expand Down
100 changes: 50 additions & 50 deletions src/styles/variables/default-colors.scss
Original file line number Diff line number Diff line change
@@ -1,54 +1,54 @@
// Auto-generated file by update:css-variables script. Do not edit manually
html {
--color-blue-50: #F3F8FF;
--color-blue-100: #DFECFE;
--color-blue-200: #CDE1FE;
--color-blue-300: #AED0FF;
--color-blue-400: #7AB0FC;
--color-blue-500: #3487FB;
--color-blue-600: #0068FA;
--color-blue-700: #0050C0;
--color-blue-800: #003784;
--color-blue-900: #00265A;
--color-gray-50: #F7F8F9;
--color-gray-100: #E6EBF3;
--color-gray-200: #D7DFEB;
--color-gray-300: #C2CFE6;
--color-gray-400: #99AFD1;
--color-gray-500: #738BB2;
--color-gray-600: #5773A1;
--color-gray-700: #3B5785;
--color-gray-800: #253E66;
--color-gray-900: #10274C;
--color-green-50: #F3F9F7;
--color-green-100: #DCEFE9;
--color-green-200: #C7E6DD;
--color-green-300: #A6D9CA;
--color-green-400: #6ABDA4;
--color-green-500: #1D9B75;
--color-green-600: #00825B;
--color-green-700: #006446;
--color-green-800: #004530;
--color-green-900: #002F21;
--color-red-50: #FEF6F6;
--color-red-100: #FBE6E7;
--color-red-200: #F9D8D9;
--color-red-300: #F7C0C3;
--color-red-400: #EF959A;
--color-red-500: #E65961;
--color-red-600: #DE212B;
--color-red-700: #AB1921;
--color-red-800: #771217;
--color-red-900: #520C10;
--color-blue-50: #EDF6FD;
--color-blue-100: #DAEDFB;
--color-blue-200: #C2E0F8;
--color-blue-300: #A2CFF5;
--color-blue-400: #71B5F0;
--color-blue-500: #2F91EA;
--color-blue-600: #1471C9;
--color-blue-700: #0F5496;
--color-blue-800: #0B3D6D;
--color-blue-900: #082C4D;
--color-gray-50: #F3F5F7;
--color-gray-100: #E7EBEF;
--color-gray-200: #D6DDE3;
--color-gray-300: #C1CBD5;
--color-gray-400: #A4B1BF;
--color-gray-500: #7D8FA3;
--color-gray-600: #5F7285;
--color-gray-700: #475463;
--color-gray-800: #333D48;
--color-gray-900: #1F262C;
--color-green-50: #E6F9F2;
--color-green-100: #C2F5E2;
--color-green-200: #92EECE;
--color-green-300: #6DDEB6;
--color-green-400: #2DC692;
--color-green-500: #1AA175;
--color-green-600: #127F5B;
--color-green-700: #0B5F43;
--color-green-800: #064530;
--color-green-900: #033021;
--color-red-50: #FFF1F1;
--color-red-100: #FFE4E4;
--color-red-200: #FFD2D2;
--color-red-300: #FFB8B8;
--color-red-400: #FF8F8E;
--color-red-500: #FA514F;
--color-red-600: #D42E2E;
--color-red-700: #A12020;
--color-red-800: #781515;
--color-red-900: #580D0D;
--color-white: #FFFFFF;
--color-yellow-50: #FFF8EA;
--color-yellow-100: #FFF0D1;
--color-yellow-200: #FFE2A8;
--color-yellow-300: #FFC95E;
--color-yellow-400: #E69900;
--color-yellow-500: #C28100;
--color-yellow-600: #946300;
--color-yellow-700: #704B00;
--color-yellow-800: #4D3300;
--color-yellow-900: #2E1F00;
--color-yellow-50: #FFF4DB;
--color-yellow-100: #FFE8B8;
--color-yellow-200: #FFD882;
--color-yellow-300: #FFC037;
--color-yellow-400: #EBA100;
--color-yellow-500: #BE8200;
--color-yellow-600: #976700;
--color-yellow-700: #704C00;
--color-yellow-800: #513800;
--color-yellow-900: #3A2700;
}
11 changes: 5 additions & 6 deletions src/styles/variables/layouts.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,14 @@ html {
--space-48: 3rem;
--space-64: 4rem;
--space-96: 6rem;
--border-radius-button: 1rem;
--border-radius-checkbox: 0.25rem;
--border-radius-button: 0.3125rem;
--border-radius-circle: 50%;
--border-radius-container: 0.5rem;
--border-radius-form: 0.5rem;
--border-radius-container: 0.3125rem;
--border-radius-form: 0.3125rem;
--border-radius-pill: 20rem;
--border-radius-sharp: 0;
--box-shadow-high: 0 2px 6px 0 rgba(16, 39, 76, 0.1), 0 2px 16px 0 rgba(16, 39, 76, 0.1);
--box-shadow-low: 0 2px 6px 0 rgba(16, 39, 76, 0.1);
--box-shadow-high: 0 2px 6px 0 rgba(51, 61, 72, 0.1), 0 2px 16px 0 rgba(51, 61, 72, 0.1);
--box-shadow-low: 0 2px 6px 0 rgba(51, 61, 72, 0.1);
--focus-inner: inset 0 0 0 2px var(--color-border-focus-light), inset 0 0 0 4px var(--color-border-focus-dark);
--focus-outer: 0 0 0 2px var(--color-border-focus-light), 0 0 0 4px var(--color-border-focus-dark);
--opacity-medium: 0.5;
Expand Down
51 changes: 24 additions & 27 deletions src/styles/variables/typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,6 @@ html {
--line-height-1: 1.25rem;
--line-height-2: 1.5rem;
--line-height-default: 1.5;
--line-height-small: 1.25;
--font-body-1-compact: var(--font-weight-default) var(--font-size-2) / var(--line-height-1) var(--font-family-body);
--font-body-1-thick: var(--font-weight-thick) var(--font-size-2) / var(--line-height-default) var(--font-family-body);
--font-body-1: var(--font-weight-default) var(--font-size-2) / var(--line-height-default) var(--font-family-body);
--font-body-2-comfortable-thick: var(--font-weight-thick) var(--font-size-1) / var(--line-height-2) var(--font-family-body);
Expand All @@ -32,33 +30,32 @@ html {
--font-body-2-compact: var(--font-weight-default) var(--font-size-1) / var(--line-height-1) var(--font-family-body);
--font-button-1: var(--font-weight-thick) var(--font-size-2) / var(--line-height-default) var(--font-family-body);
--font-caption: var(--font-weight-default) var(--font-size-0) / var(--line-height-1) var(--font-family-body);
--font-h1: var(--font-weight-thick) var(--font-size-6) / var(--line-height-small) var(--font-family-heading);
--font-h2: var(--font-weight-thick) var(--font-size-4) / var(--line-height-default) var(--font-family-heading);
--font-h3: var(--font-weight-thick) var(--font-size-3) / var(--line-height-default) var(--font-family-heading);
--font-h4: var(--font-weight-thick) var(--font-size-2) / var(--line-height-default) var(--font-family-heading);
--font-h5: var(--font-weight-thick) var(--font-size-1) / var(--line-height-2) var(--font-family-heading);
--font-heading-style-1: var(--font-weight-default) var(--font-size-6) / var(--line-height-default) var(--font-family-heading);
--font-heading-style-2: var(--font-weight-default) var(--font-size-4) / var(--line-height-default) var(--font-family-heading);
--font-heading-style-3: var(--font-weight-default) var(--font-size-3) / var(--line-height-default) var(--font-family-heading);
--font-heading-style-4: var(--font-weight-thick) var(--font-size-2) / var(--line-height-default) var(--font-family-heading);
--font-heading-style-5: var(--font-weight-thick) var(--font-size-1) / var(--line-height-2) var(--font-family-heading);
@media screen and (min-width: 768px) {
--font-h1: var(--font-weight-thick) var(--font-size-7) / var(--line-height-small) var(--font-family-heading);
--font-h2: var(--font-weight-thick) var(--font-size-5) / var(--line-height-default) var(--font-family-heading);
--font-h3: var(--font-weight-thick) var(--font-size-4) / var(--line-height-default) var(--font-family-heading);
--font-heading-style-1: var(--font-weight-default) var(--font-size-7) / var(--line-height-default) var(--font-family-heading);
--font-heading-style-2: var(--font-weight-default) var(--font-size-5) / var(--line-height-default) var(--font-family-heading);
--font-heading-style-3: var(--font-weight-default) var(--font-size-4) / var(--line-height-default) var(--font-family-heading);
}
--letter-spacing-body-1-compact: var(--letter-spacing-none);
--letter-spacing-body-1-thick: var(--letter-spacing-none);
--letter-spacing-body-1: var(--letter-spacing-none);
--letter-spacing-body-2-comfortable-thick: var(--letter-spacing-small);
--letter-spacing-body-2-comfortable: var(--letter-spacing-small);
--letter-spacing-body-2-compact-thick: var(--letter-spacing-small);
--letter-spacing-body-2-compact: var(--letter-spacing-small);
--letter-spacing-button-1: var(--letter-spacing-none);
--letter-spacing-body-1-thick: var(--letter-spacing-medium);
--letter-spacing-body-1: var(--letter-spacing-medium);
--letter-spacing-body-2-comfortable-thick: var(--letter-spacing-medium);
--letter-spacing-body-2-comfortable: var(--letter-spacing-medium);
--letter-spacing-body-2-compact-thick: var(--letter-spacing-medium);
--letter-spacing-body-2-compact: var(--letter-spacing-medium);
--letter-spacing-button-1: var(--letter-spacing-medium);
--letter-spacing-caption: var(--letter-spacing-medium);
--letter-spacing-h1: var(--letter-spacing-none);
--letter-spacing-h2: var(--letter-spacing-none);
--letter-spacing-h3: var(--letter-spacing-none);
--letter-spacing-h4: var(--letter-spacing-none);
--letter-spacing-h5: var(--letter-spacing-medium);
--letter-spacing-heading-style-1: var(--letter-spacing-none);
--letter-spacing-heading-style-2: var(--letter-spacing-small);
--letter-spacing-heading-style-3: var(--letter-spacing-small);
--letter-spacing-heading-style-4: var(--letter-spacing-medium);
--letter-spacing-heading-style-5: var(--letter-spacing-medium);
@media screen and (min-width: 768px) {
--letter-spacing-h1: var(--letter-spacing-none);
--letter-spacing-h2: var(--letter-spacing-none);
--letter-spacing-h3: var(--letter-spacing-none);
--letter-spacing-heading-style-1: var(--letter-spacing-none);
--letter-spacing-heading-style-2: var(--letter-spacing-none);
--letter-spacing-heading-style-3: var(--letter-spacing-small);
}
}
}

0 comments on commit 2f9d4bc

Please sign in to comment.