Skip to content

Commit

Permalink
feat(tokens): add new tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@rzpcibot
rzpcibot committed Jan 9, 2025
1 parent 6aae282 commit 8a17891
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 14 deletions.
66 changes: 64 additions & 2 deletions packages/blade/src/tokens/global/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ export const colors: Color = {
a100: `hsla(227, 100%, 59%, ${opacity[300]})`,
a150: `hsla(227, 100%, 59%, ${opacity[400]})`,
a200: `hsla(227, 100%, 59%, ${opacity[500]})`,
a400: `hsla(227, 100%, 59%, ${opacity[800]})`,
},
emerald: {
50: `hsla(152, 60%, 95%, ${opacity[1200]})`,
Expand All @@ -110,6 +111,7 @@ export const colors: Color = {
a100: `hsla(150, 100%, 32%, ${opacity[300]})`,
a150: `hsla(150, 100%, 32%, ${opacity[400]})`,
a200: `hsla(150, 100%, 32%, ${opacity[500]})`,
a400: `hsla(150, 100%, 32%, ${opacity[800]})`,
},
crimson: {
50: `hsla(0, 100%, 98%, ${opacity[1200]})`,
Expand All @@ -127,6 +129,7 @@ export const colors: Color = {
a100: `hsla(4, 74%, 49%, ${opacity[300]})`,
a150: `hsla(4, 74%, 49%, ${opacity[400]})`,
a200: `hsla(4, 74%, 49%, ${opacity[500]})`,
a400: `hsla(4, 74%, 49%, ${opacity[800]})`,
},
cider: {
50: `hsla(24, 100%, 96%, ${opacity[1200]})`,
Expand All @@ -144,6 +147,7 @@ export const colors: Color = {
a100: `hsla(25, 90%, 48%, ${opacity[300]})`,
a150: `hsla(25, 90%, 48%, ${opacity[400]})`,
a200: `hsla(25, 90%, 48%, ${opacity[500]})`,
a400: `hsla(25, 90%, 48%, ${opacity[800]})`,
},
sapphire: {
50: `hsla(201, 92%, 95%, ${opacity[1200]})`,
Expand All @@ -161,6 +165,7 @@ export const colors: Color = {
a100: `hsla(200, 84%, 44%, ${opacity[300]})`,
a150: `hsla(200, 84%, 44%, ${opacity[400]})`,
a200: `hsla(200, 84%, 44%, ${opacity[500]})`,
a400: `hsla(200, 84%, 44%, ${opacity[800]})`,
},
sea: {
50: `hsla(180, 39%, 95%, ${opacity[1200]})`,
Expand All @@ -178,6 +183,7 @@ export const colors: Color = {
a100: `hsla(180, 60%, 30%, ${opacity[300]})`,
a150: `hsla(180, 60%, 30%, ${opacity[400]})`,
a200: `hsla(180, 60%, 30%, ${opacity[500]})`,
a400: `hsla(180, 60%, 30%, ${opacity[800]})`,
},
cloud: {
50: `hsla(198, 39%, 95%, ${opacity[1200]})`,
Expand All @@ -195,6 +201,7 @@ export const colors: Color = {
a100: `hsla(200, 60%, 30%, ${opacity[300]})`,
a150: `hsla(200, 60%, 30%, ${opacity[400]})`,
a200: `hsla(200, 60%, 30%, ${opacity[500]})`,
a400: `hsla(200, 60%, 30%, ${opacity[800]})`,
},
forest: {
50: `hsla(152, 60%, 95%, ${opacity[1200]})`,
Expand All @@ -212,6 +219,61 @@ export const colors: Color = {
a100: `hsla(155, 100%, 31%, ${opacity[300]})`,
a150: `hsla(155, 100%, 31%, ${opacity[400]})`,
a200: `hsla(155, 100%, 31%, ${opacity[500]})`,
a400: `hsla(155, 100%, 31%, ${opacity[800]})`,
},
orchid: {
50: `hsla(249, 100%, 98%, ${opacity[1200]})`,
100: `hsla(252, 100%, 95%, ${opacity[1200]})`,
200: `hsla(252, 100%, 88%, ${opacity[1200]})`,
300: `hsla(252, 100%, 80%, ${opacity[1200]})`,
400: `hsla(252, 100%, 74%, ${opacity[1200]})`,
500: `hsla(252, 100%, 67%, ${opacity[1200]})`,
600: `hsla(252, 57%, 54%, ${opacity[1200]})`,
700: `hsla(251, 49%, 41%, ${opacity[1200]})`,
800: `hsla(251, 49%, 32%, ${opacity[1200]})`,
900: `hsla(252, 50%, 24%, ${opacity[1200]})`,
1000: `hsla(252, 50%, 17%, ${opacity[1200]})`,
a50: `hsla(252, 100%, 67%, ${opacity[100]})`,
a100: `hsla(252, 100%, 67%, ${opacity[300]})`,
a150: `hsla(252, 100%, 67%, ${opacity[400]})`,
a200: `hsla(252, 100%, 67%, ${opacity[500]})`,
a400: `hsla(252, 100%, 67%, ${opacity[800]})`,
},
magenta: {
50: `hsla(330, 78%, 97%, ${opacity[1200]})`,
100: `hsla(331, 83%, 93%, ${opacity[1200]})`,
200: `hsla(330, 83%, 84%, ${opacity[1200]})`,
300: `hsla(331, 82%, 74%, ${opacity[1200]})`,
400: `hsla(331, 82%, 65%, ${opacity[1200]})`,
500: `hsla(331, 82%, 56%, ${opacity[1200]})`,
600: `hsla(331, 64%, 45%, ${opacity[1200]})`,
700: `hsla(331, 64%, 34%, ${opacity[1200]})`,
800: `hsla(331, 65%, 27%, ${opacity[1200]})`,
900: `hsla(331, 65%, 21%, ${opacity[1200]})`,
1000: `hsla(331, 65%, 15%, ${opacity[1200]})`,
a50: `hsla(331, 82%, 56%, ${opacity[100]})`,
a100: `hsla(331, 82%, 56%, ${opacity[300]})`,
a150: `hsla(331, 82%, 56%, ${opacity[400]})`,
a200: `hsla(331, 82%, 56%, ${opacity[500]})`,
a400: `hsla(331, 82%, 56%, ${opacity[800]})`,
},
topaz: {
50: `hsla(51, 100%, 92%, ${opacity[1200]})`,
100: `hsla(51, 100%, 80%, ${opacity[1200]})`,
200: `hsla(51, 100%, 68%, ${opacity[1200]})`,
300: `hsla(51, 100%, 60%, ${opacity[1200]})`,
400: `hsla(51, 100%, 50%, ${opacity[1200]})`,
500: `hsla(50, 100%, 46%, ${opacity[1200]})`,
600: `hsla(50, 100%, 40%, ${opacity[1200]})`,
700: `hsla(50, 100%, 32%, ${opacity[1200]})`,
800: `hsla(50, 100%, 28%, ${opacity[1200]})`,
900: `hsla(50, 100%, 24%, ${opacity[1200]})`,
1000: `hsla(50, 97%, 19%, ${opacity[1200]})`,
a50: `hsla(50, 100%, 46%, ${opacity[100]})`,
a100: `hsla(50, 100%, 46%, ${opacity[300]})`,
a150: `hsla(50, 100%, 46%, ${opacity[400]})`,
a200: `hsla(50, 100%, 46%, ${opacity[500]})`,
a400: `hsla(50, 100%, 46%, ${opacity[800]})`,
},
},
neutral: {
Expand Down Expand Up @@ -279,7 +341,7 @@ export const colors: Color = {
1300: `hsla(214, 24%, 6%, ${opacity[1200]})`,
a25: `hsla(214, 6%, 55%, ${opacity[50]})`,
a50: `hsla(214, 6%, 55%, ${opacity[100]})`,
a75: `hsla(214, 6%, 55%, ${opacity[100]})`,
a75: `hsla(214, 6%, 55%, ${opacity[200]})`,
a100: `hsla(214, 6%, 55%, ${opacity[300]})`,
a200: `hsla(214, 6%, 55%, ${opacity[500]})`,
a400: `hsla(214, 6%, 55%, ${opacity[500]})`,
Expand All @@ -302,7 +364,7 @@ export const colors: Color = {
1300: `hsla(240, 5%, 4%, ${opacity[1200]})`,
a25: `hsla(228, 4%, 76%, ${opacity[50]})`,
a50: `hsla(228, 4%, 76%, ${opacity[100]})`,
a75: `hsla(228, 4%, 76%, ${opacity[100]})`,
a75: `hsla(228, 4%, 76%, ${opacity[200]})`,
a100: `hsla(228, 4%, 76%, ${opacity[300]})`,
a200: `hsla(228, 4%, 76%, ${opacity[500]})`,
a400: `hsla(228, 4%, 76%, ${opacity[500]})`,
Expand Down
24 changes: 12 additions & 12 deletions packages/blade/src/tokens/theme/bladeTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,14 +229,14 @@ const colors: ColorsWithModes = {
gray: {
default: globalColors.neutral.blueGrayLight.a75,
highlighted: globalColors.neutral.blueGrayLight.a100,
disabled: globalColors.neutral.blueGrayLight.a50,
disabled: globalColors.neutral.blueGrayLight.a100,
faded: globalColors.neutral.blueGrayLight.a25,
fadedHighlighted: globalColors.neutral.blueGrayLight.a75,
},
primary: {
default: globalColors.chromatic.azure[500],
highlighted: globalColors.chromatic.azure[600],
disabled: globalColors.chromatic.azure.a50,
disabled: globalColors.chromatic.azure.a100,
faded: globalColors.chromatic.azure.a50,
fadedHighlighted: globalColors.chromatic.azure.a100,
},
Expand Down Expand Up @@ -352,7 +352,7 @@ const colors: ColorsWithModes = {
normal: globalColors.chromatic.azure[600],
subtle: globalColors.chromatic.azure[500],
muted: globalColors.chromatic.azure[400],
disabled: globalColors.chromatic.azure.a100,
disabled: globalColors.chromatic.azure.a200,
},
onPrimary: {
normal: globalColors.neutral.white[500],
Expand Down Expand Up @@ -414,7 +414,7 @@ const colors: ColorsWithModes = {
normal: globalColors.chromatic.azure[600],
subtle: globalColors.chromatic.azure[500],
muted: globalColors.chromatic.azure[400],
disabled: globalColors.chromatic.azure.a100,
disabled: globalColors.chromatic.azure.a200,
},
onPrimary: {
normal: globalColors.neutral.white[500],
Expand Down Expand Up @@ -605,7 +605,7 @@ const colors: ColorsWithModes = {
intense: globalColors.chromatic.sapphire[400],
},
neutral: {
subtle: globalColors.neutral.blueGrayDark[700],
subtle: globalColors.neutral.blueGrayDark[400],
intense: globalColors.neutral.blueGrayDark[50],
},
},
Expand Down Expand Up @@ -672,14 +672,14 @@ const colors: ColorsWithModes = {
gray: {
default: globalColors.neutral.blueGrayDark.a75,
highlighted: globalColors.neutral.blueGrayDark.a100,
disabled: globalColors.neutral.blueGrayDark.a50,
disabled: globalColors.neutral.blueGrayDark.a100,
faded: globalColors.neutral.blueGrayDark.a25,
fadedHighlighted: globalColors.neutral.blueGrayDark.a75,
},
primary: {
default: globalColors.chromatic.azure[400],
highlighted: globalColors.chromatic.azure[500],
disabled: globalColors.chromatic.azure.a100,
disabled: globalColors.chromatic.azure.a150,
faded: globalColors.chromatic.azure.a150,
fadedHighlighted: globalColors.chromatic.azure.a200,
},
Expand Down Expand Up @@ -732,7 +732,7 @@ const colors: ColorsWithModes = {
gray: {
default: globalColors.neutral.blueGrayDark[600],
highlighted: globalColors.neutral.blueGrayDark[600],
disabled: globalColors.neutral.blueGrayDark[800],
disabled: globalColors.neutral.blueGrayDark[700],
faded: globalColors.neutral.blueGrayDark.a100,
},
primary: {
Expand Down Expand Up @@ -795,7 +795,7 @@ const colors: ColorsWithModes = {
normal: globalColors.chromatic.azure[300],
subtle: globalColors.chromatic.azure[400],
muted: globalColors.chromatic.azure[600],
disabled: globalColors.chromatic.azure.a200,
disabled: globalColors.chromatic.azure.a400,
},
onPrimary: {
normal: globalColors.neutral.white[500],
Expand Down Expand Up @@ -857,7 +857,7 @@ const colors: ColorsWithModes = {
normal: globalColors.chromatic.azure[300],
subtle: globalColors.chromatic.azure[400],
muted: globalColors.chromatic.azure[600],
disabled: globalColors.chromatic.azure.a200,
disabled: globalColors.chromatic.azure.a400,
},
onPrimary: {
normal: globalColors.neutral.white[500],
Expand Down Expand Up @@ -888,14 +888,14 @@ const colors: ColorsWithModes = {
popup: {
background: {
subtle: globalColors.neutral.blueGrayDark[1000],
intense: globalColors.neutral.blueGrayDark[1000],
intense: globalColors.neutral.blueGrayDark[700],
},
border: {
subtle: globalColors.neutral.blueGrayDark.a100,
intense: globalColors.neutral.blueGrayDark.a100,
},
},
transparent: `hsla(0, 0%, 100%, ${opacity[0]})`,
transparent: `hsla(217, 27%, 15%, ${opacity[0]})`,
},
};

Expand Down

0 comments on commit 8a17891

Please sign in to comment.