Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@diyorbek
diyorbek committed Sep 30, 2024
1 parent 6b5758e commit f0a84c6
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 120 deletions.
72 changes: 24 additions & 48 deletions packages/gestalt-design-tokens/tests/__snapshots__/web.test.js.snap
View file

Large diffs are not rendered by default.

24 changes: 13 additions & 11 deletions packages/gestalt-design-tokens/tokens/vr-theme/comp/spinner.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,19 @@
"comp": {
"spinner": {
"color": {
"pink": {
"type": "color",
"value": "#d452d1"
},
"orange": {
"type": "color",
"value": "#ff7c36"
},
"blue": {
"type": "color",
"value": "#24ccb0"
"background": {
"pink": {
"type": "color",
"value": "#d452d1"
},
"orange": {
"type": "color",
"value": "#ff7c36"
},
"blue": {
"type": "color",
"value": "#24ccb0"
}
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions packages/gestalt/src/Spinner/VRSpinner.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,18 +77,18 @@

@keyframes colors {
0% {
background-color: var(--comp-spinner-color-pink);
background-color: var(--comp-spinner-color-background-pink);
}

33.333% {
background-color: var(--comp-spinner-color-orange);
background-color: var(--comp-spinner-color-background-orange);
}

66.666% {
background-color: var(--comp-spinner-color-blue);
background-color: var(--comp-spinner-color-background-blue);
}

100% {
background-color: var(--comp-spinner-color-pink);
background-color: var(--comp-spinner-color-background-pink);
}
}
78 changes: 21 additions & 57 deletions packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -289,9 +289,6 @@ exports[`ColorSchemeProvider renders styling for dark mode when specified 1`] =
--color-background-tag-warning-active: #d86800;
--color-background-segmentedcontrol-container: #404040;
--color-background-segmentedcontrol-tab-selected: #030303;
--color-background-spinner-color-pink: #d452d1;
--color-background-spinner-color-orange: #ff7c36;
--color-background-spinner-color-blue: #24ccb0;
--color-background-switch-default-selected: #efefef;
--color-background-switch-default-unselected: #030303;
--color-background-switch-disabled-selected: #ababab;
Expand Down Expand Up @@ -751,9 +748,6 @@ exports[`ColorSchemeProvider renders styling for light mode when no color scheme
--color-background-tag-warning-active: #943a00;
--color-background-segmentedcontrol-container: #efefef;
--color-background-segmentedcontrol-tab-selected: #ffffff;
--color-background-spinner-color-pink: #d452d1;
--color-background-spinner-color-orange: #ff7c36;
--color-background-spinner-color-blue: #24ccb0;
--color-background-switch-default-selected: #111111;
--color-background-switch-default-unselected: #ffffff;
--color-background-switch-disabled-selected: #767676;
Expand Down Expand Up @@ -1227,9 +1221,6 @@ exports[`ColorSchemeProvider renders styling for light mode when specified 1`] =
--color-background-tag-warning-active: #943a00;
--color-background-segmentedcontrol-container: #efefef;
--color-background-segmentedcontrol-tab-selected: #ffffff;
--color-background-spinner-color-pink: #d452d1;
--color-background-spinner-color-orange: #ff7c36;
--color-background-spinner-color-blue: #24ccb0;
--color-background-switch-default-selected: #111111;
--color-background-switch-default-unselected: #ffffff;
--color-background-switch-disabled-selected: #767676;
Expand Down Expand Up @@ -1703,9 +1694,6 @@ exports[`ColorSchemeProvider renders styling with a custom class if has an id 1`
--color-background-tag-warning-active: #943a00;
--color-background-segmentedcontrol-container: #efefef;
--color-background-segmentedcontrol-tab-selected: #ffffff;
--color-background-spinner-color-pink: #d452d1;
--color-background-spinner-color-orange: #ff7c36;
--color-background-spinner-color-blue: #24ccb0;
--color-background-switch-default-selected: #111111;
--color-background-switch-default-unselected: #ffffff;
--color-background-switch-disabled-selected: #767676;
Expand Down Expand Up @@ -2167,9 +2155,6 @@ exports[`ColorSchemeProvider renders styling with media query when userPreferenc
--color-background-tag-warning-active: #d86800;
--color-background-segmentedcontrol-container: #404040;
--color-background-segmentedcontrol-tab-selected: #030303;
--color-background-spinner-color-pink: #d452d1;
--color-background-spinner-color-orange: #ff7c36;
--color-background-spinner-color-blue: #24ccb0;
--color-background-switch-default-selected: #efefef;
--color-background-switch-default-unselected: #030303;
--color-background-switch-disabled-selected: #ababab;
Expand Down Expand Up @@ -2894,9 +2879,9 @@ exports[`visual refresh tokens uses visual refresh dark mode theme when specifie
--sema-motion-opacity-duration-instant: 0ms;
--sema-motion-opacity-easing-default: cubic-bezier(0, 0, 1, 1);
--sema-motion-opacity-easing-instant: cubic-bezier(0, 0, 1, 1);
--comp-spinner-color-pink: #d452d1;
--comp-spinner-color-orange: #ff7c36;
--comp-spinner-color-blue: #24ccb0;
--comp-spinner-color-background-pink: #d452d1;
--comp-spinner-color-background-orange: #ff7c36;
--comp-spinner-color-background-blue: #24ccb0;
--color-data-visualization-10: #007a72;
--color-data-visualization-11: #f76593;
--color-data-visualization-12: #ffc58f;
Expand Down Expand Up @@ -3156,9 +3141,6 @@ exports[`visual refresh tokens uses visual refresh dark mode theme when specifie
--color-background-datepicker-button-hover: #242423;
--color-background-datepicker-button-active: #393937;
--color-background-datepicker-button-selected: #efefef;
--color-background-spinner-color-pink: #d452d1;
--color-background-spinner-color-orange: #ff7c36;
--color-background-spinner-color-blue: #24ccb0;
--color-background-switch-default-unselected: #000000;
--color-background-switch-default-selected: #e8e7e1;
--color-background-switch-disabled-unselected: #000000;
Expand Down Expand Up @@ -3842,9 +3824,9 @@ exports[`visual refresh tokens uses visual refresh light mode theme when specifi
--sema-motion-opacity-duration-instant: 0ms;
--sema-motion-opacity-easing-default: cubic-bezier(0, 0, 1, 1);
--sema-motion-opacity-easing-instant: cubic-bezier(0, 0, 1, 1);
--comp-spinner-color-pink: #d452d1;
--comp-spinner-color-orange: #ff7c36;
--comp-spinner-color-blue: #24ccb0;
--comp-spinner-color-background-pink: #d452d1;
--comp-spinner-color-background-orange: #ff7c36;
--comp-spinner-color-background-blue: #24ccb0;
--color-data-visualization-10: #005062;
--color-data-visualization-11: #de2c62;
--color-data-visualization-12: #660e00;
Expand Down Expand Up @@ -4101,9 +4083,6 @@ exports[`visual refresh tokens uses visual refresh light mode theme when specifi
--color-background-datepicker-button-hover: #f8f7f2;
--color-background-datepicker-button-active: #ebebe5;
--color-background-datepicker-button-selected: #000000;
--color-background-spinner-color-pink: #d452d1;
--color-background-spinner-color-orange: #ff7c36;
--color-background-spinner-color-blue: #24ccb0;
--color-background-switch-default-unselected: #ffffff;
--color-background-switch-default-selected: #000000;
--color-background-switch-disabled-unselected: #ffffff;
Expand Down Expand Up @@ -4788,9 +4767,9 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
--sema-motion-opacity-duration-instant: 0ms;
--sema-motion-opacity-easing-default: cubic-bezier(0, 0, 1, 1);
--sema-motion-opacity-easing-instant: cubic-bezier(0, 0, 1, 1);
--comp-spinner-color-pink: #d452d1;
--comp-spinner-color-orange: #ff7c36;
--comp-spinner-color-blue: #24ccb0;
--comp-spinner-color-background-pink: #d452d1;
--comp-spinner-color-background-orange: #ff7c36;
--comp-spinner-color-background-blue: #24ccb0;
--color-data-visualization-10: #005062;
--color-data-visualization-11: #de2c62;
--color-data-visualization-12: #660e00;
Expand Down Expand Up @@ -5047,9 +5026,6 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
--color-background-datepicker-button-hover: #f8f7f2;
--color-background-datepicker-button-active: #ebebe5;
--color-background-datepicker-button-selected: #000000;
--color-background-spinner-color-pink: #d452d1;
--color-background-spinner-color-orange: #ff7c36;
--color-background-spinner-color-blue: #24ccb0;
--color-background-switch-default-unselected: #ffffff;
--color-background-switch-default-selected: #000000;
--color-background-switch-disabled-unselected: #ffffff;
Expand Down Expand Up @@ -5734,9 +5710,9 @@ exports[`visual refresh tokens uses visual refresh with ja line height 1`] = `
--sema-motion-opacity-duration-instant: 0ms;
--sema-motion-opacity-easing-default: cubic-bezier(0, 0, 1, 1);
--sema-motion-opacity-easing-instant: cubic-bezier(0, 0, 1, 1);
--comp-spinner-color-pink: #d452d1;
--comp-spinner-color-orange: #ff7c36;
--comp-spinner-color-blue: #24ccb0;
--comp-spinner-color-background-pink: #d452d1;
--comp-spinner-color-background-orange: #ff7c36;
--comp-spinner-color-background-blue: #24ccb0;
--color-data-visualization-10: #005062;
--color-data-visualization-11: #de2c62;
--color-data-visualization-12: #660e00;
Expand Down Expand Up @@ -5993,9 +5969,6 @@ exports[`visual refresh tokens uses visual refresh with ja line height 1`] = `
--color-background-datepicker-button-hover: #f8f7f2;
--color-background-datepicker-button-active: #ebebe5;
--color-background-datepicker-button-selected: #000000;
--color-background-spinner-color-pink: #d452d1;
--color-background-spinner-color-orange: #ff7c36;
--color-background-spinner-color-blue: #24ccb0;
--color-background-switch-default-unselected: #ffffff;
--color-background-switch-default-selected: #000000;
--color-background-switch-disabled-unselected: #ffffff;
Expand Down Expand Up @@ -6680,9 +6653,9 @@ exports[`visual refresh tokens uses visual refresh with tall line height 1`] = `
--sema-motion-opacity-duration-instant: 0ms;
--sema-motion-opacity-easing-default: cubic-bezier(0, 0, 1, 1);
--sema-motion-opacity-easing-instant: cubic-bezier(0, 0, 1, 1);
--comp-spinner-color-pink: #d452d1;
--comp-spinner-color-orange: #ff7c36;
--comp-spinner-color-blue: #24ccb0;
--comp-spinner-color-background-pink: #d452d1;
--comp-spinner-color-background-orange: #ff7c36;
--comp-spinner-color-background-blue: #24ccb0;
--color-data-visualization-10: #005062;
--color-data-visualization-11: #de2c62;
--color-data-visualization-12: #660e00;
Expand Down Expand Up @@ -6939,9 +6912,6 @@ exports[`visual refresh tokens uses visual refresh with tall line height 1`] = `
--color-background-datepicker-button-hover: #f8f7f2;
--color-background-datepicker-button-active: #ebebe5;
--color-background-datepicker-button-selected: #000000;
--color-background-spinner-color-pink: #d452d1;
--color-background-spinner-color-orange: #ff7c36;
--color-background-spinner-color-blue: #24ccb0;
--color-background-switch-default-unselected: #ffffff;
--color-background-switch-default-selected: #000000;
--color-background-switch-disabled-unselected: #ffffff;
Expand Down Expand Up @@ -7626,9 +7596,9 @@ exports[`visual refresh tokens uses visual refresh with th line height 1`] = `
--sema-motion-opacity-duration-instant: 0ms;
--sema-motion-opacity-easing-default: cubic-bezier(0, 0, 1, 1);
--sema-motion-opacity-easing-instant: cubic-bezier(0, 0, 1, 1);
--comp-spinner-color-pink: #d452d1;
--comp-spinner-color-orange: #ff7c36;
--comp-spinner-color-blue: #24ccb0;
--comp-spinner-color-background-pink: #d452d1;
--comp-spinner-color-background-orange: #ff7c36;
--comp-spinner-color-background-blue: #24ccb0;
--color-data-visualization-10: #005062;
--color-data-visualization-11: #de2c62;
--color-data-visualization-12: #660e00;
Expand Down Expand Up @@ -7885,9 +7855,6 @@ exports[`visual refresh tokens uses visual refresh with th line height 1`] = `
--color-background-datepicker-button-hover: #f8f7f2;
--color-background-datepicker-button-active: #ebebe5;
--color-background-datepicker-button-selected: #000000;
--color-background-spinner-color-pink: #d452d1;
--color-background-spinner-color-orange: #ff7c36;
--color-background-spinner-color-blue: #24ccb0;
--color-background-switch-default-unselected: #ffffff;
--color-background-switch-default-selected: #000000;
--color-background-switch-disabled-unselected: #ffffff;
Expand Down Expand Up @@ -8572,9 +8539,9 @@ exports[`visual refresh tokens uses visual refresh with vi line height 1`] = `
--sema-motion-opacity-duration-instant: 0ms;
--sema-motion-opacity-easing-default: cubic-bezier(0, 0, 1, 1);
--sema-motion-opacity-easing-instant: cubic-bezier(0, 0, 1, 1);
--comp-spinner-color-pink: #d452d1;
--comp-spinner-color-orange: #ff7c36;
--comp-spinner-color-blue: #24ccb0;
--comp-spinner-color-background-pink: #d452d1;
--comp-spinner-color-background-orange: #ff7c36;
--comp-spinner-color-background-blue: #24ccb0;
--color-data-visualization-10: #005062;
--color-data-visualization-11: #de2c62;
--color-data-visualization-12: #660e00;
Expand Down Expand Up @@ -8831,9 +8798,6 @@ exports[`visual refresh tokens uses visual refresh with vi line height 1`] = `
--color-background-datepicker-button-hover: #f8f7f2;
--color-background-datepicker-button-active: #ebebe5;
--color-background-datepicker-button-selected: #000000;
--color-background-spinner-color-pink: #d452d1;
--color-background-spinner-color-orange: #ff7c36;
--color-background-spinner-color-blue: #24ccb0;
--color-background-switch-default-unselected: #ffffff;
--color-background-switch-default-selected: #000000;
--color-background-switch-disabled-unselected: #ffffff;
Expand Down

0 comments on commit f0a84c6

Please sign in to comment.