From 03a0c69a7621266b3cdf8b1fadc647a9ff75d0d0 Mon Sep 17 00:00:00 2001 From: GoldGroove06 <73437174+GoldGroove06@users.noreply.github.com> Date: Thu, 2 Oct 2025 01:07:19 +0530 Subject: [PATCH 1/2] green and red alpha colors --- src/examples/Colors/ColorsTemplate.js | 28 ++++++++++++++++++++++++++ styles/cssTokens/base.tokens.css | 24 ++++++++++++++++++++++ styles/jsTokens/colors.tokens.js | 29 +++++++++++++++++++++++++++ 3 files changed, 81 insertions(+) diff --git a/src/examples/Colors/ColorsTemplate.js b/src/examples/Colors/ColorsTemplate.js index 46aac571a..fffc74bdd 100644 --- a/src/examples/Colors/ColorsTemplate.js +++ b/src/examples/Colors/ColorsTemplate.js @@ -107,6 +107,20 @@ const colors = { 'bg-red-950', 'bg-red-1000' ], + 'red-alpha': [ + 'bg-red-alpha-50', + 'bg-red-alpha-100', + 'bg-red-alpha-200', + 'bg-red-alpha-300', + 'bg-red-alpha-400', + 'bg-red-alpha-500', + 'bg-red-alpha-600', + 'bg-red-alpha-700', + 'bg-red-alpha-800', + 'bg-red-alpha-900', + 'bg-red-alpha-950', + 'bg-red-alpha-1000' + ], ruby: [ 'bg-ruby-50', 'bg-ruby-100', @@ -261,6 +275,20 @@ const colors = { 'bg-green-950', 'bg-green-1000' ], + 'green-alpha': [ + 'bg-green-alpha-50', + 'bg-green-alpha-100', + 'bg-green-alpha-200', + 'bg-green-alpha-300', + 'bg-green-alpha-400', + 'bg-green-alpha-500', + 'bg-green-alpha-600', + 'bg-green-alpha-700', + 'bg-green-alpha-800', + 'bg-green-alpha-900', + 'bg-green-alpha-950', + 'bg-green-alpha-1000' + ], grass: [ 'bg-grass-50', 'bg-grass-100', diff --git a/styles/cssTokens/base.tokens.css b/styles/cssTokens/base.tokens.css index 112f9af74..ae199fb0b 100644 --- a/styles/cssTokens/base.tokens.css +++ b/styles/cssTokens/base.tokens.css @@ -96,6 +96,18 @@ --rad-ui-color-red-900: oklch(0.56 0.17 14); --rad-ui-color-red-950: oklch(0.5 0.17 14); --rad-ui-color-red-1000: oklch(0.3 0.093 10); +--rad-ui-color-red-alpha-50: oklch(0.99 0.004 15 / 0.01); +--rad-ui-color-red-alpha-100: oklch(0.98 0.01 16 / 0.03); +--rad-ui-color-red-alpha-200: oklch(0.97 0.023 16 / 0.08); +--rad-ui-color-red-alpha-300: oklch(0.94 0.041 16 / 0.14); +--rad-ui-color-red-alpha-400: oklch(0.91 0.06 16 / 0.20); +--rad-ui-color-red-alpha-500: oklch(0.87 0.075 16 / 0.26); +--rad-ui-color-red-alpha-600: oklch(0.81 0.094 15 / 0.34); +--rad-ui-color-red-alpha-700: oklch(0.75 0.114 15 / 0.44); +--rad-ui-color-red-alpha-800: oklch(0.61 0.17 14 / 0.72); +--rad-ui-color-red-alpha-900: oklch(0.56 0.17 14 / 0.76); +--rad-ui-color-red-alpha-950: oklch(0.5 0.17 14 / 0.83); +--rad-ui-color-red-alpha-1000: oklch(0.3 0.093 10 / 0.91); --rad-ui-color-ruby-50: hsl(348, 100%, 99.5%); --rad-ui-color-ruby-100: hsl(345, 100%, 98.4%); --rad-ui-color-ruby-200: hsl(345, 89.9%, 96.7%); @@ -252,6 +264,18 @@ --rad-ui-color-green-900: oklch(0.6 0.11 153); --rad-ui-color-green-950: oklch(0.53 0.1 152); --rad-ui-color-green-1000: oklch(0.28 0.042 150); +--rad-ui-color-green-alpha-50: oklch(0.96 0.05 152 / 0.015); +--rad-ui-color-green-alpha-100: oklch(0.91 0.07 151 / 0.04); +--rad-ui-color-green-alpha-200: oklch(0.89 0.08 150 / 0.1); +--rad-ui-color-green-alpha-300: oklch(0.88 0.09 150 / 0.16); +--rad-ui-color-green-alpha-400: oklch(0.88 0.10 149 / 0.23); +--rad-ui-color-green-alpha-500: oklch(0.82 0.12 149 / 0.32); +--rad-ui-color-green-alpha-600: oklch(0.79 0.12 149 / 0.44); +--rad-ui-color-green-alpha-700: oklch(0.79 0.12 149 / 0.64); +--rad-ui-color-green-alpha-800: oklch(0.77 0.12 150 / 0.81); +--rad-ui-color-green-alpha-900: oklch(0.74 0.12 150 / 0.83); +--rad-ui-color-green-alpha-950: oklch(0.66 0.12 150 / 0.87); +--rad-ui-color-green-alpha-1000: oklch(0.48 0.11 149 / 0.9); --rad-ui-color-grass-50: #fbfefb; --rad-ui-color-grass-100: #f5fbf5; --rad-ui-color-grass-200: #e9f6e9; diff --git a/styles/jsTokens/colors.tokens.js b/styles/jsTokens/colors.tokens.js index 1410fffca..bdc15fa60 100644 --- a/styles/jsTokens/colors.tokens.js +++ b/styles/jsTokens/colors.tokens.js @@ -110,6 +110,21 @@ export default { 900: 'var(--rad-ui-color-red-900)', 950: 'var(--rad-ui-color-red-950)', 1000: 'var(--rad-ui-color-red-1000)' + + }, + 'red-alpha': { + 50: 'var(--rad-ui-color-red-alpha-50)', + 100: 'var(--rad-ui-color-red-alpha-100)', + 200: 'var(--rad-ui-color-red-alpha-200)', + 300: 'var(--rad-ui-color-red-alpha-300)', + 400: 'var(--rad-ui-color-red-alpha-400)', + 500: 'var(--rad-ui-color-red-alpha-500)', + 600: 'var(--rad-ui-color-red-alpha-600)', + 700: 'var(--rad-ui-color-red-alpha-700)', + 800: 'var(--rad-ui-color-red-alpha-800)', + 900: 'var(--rad-ui-color-red-alpha-900)', + 950: 'var(--rad-ui-color-red-alpha-950)', + 1000: 'var(--rad-ui-color-red-alpha-1000)' }, ruby: { 50: 'var(--rad-ui-color-ruby-50)', @@ -293,6 +308,20 @@ export default { 950: 'var(--rad-ui-color-green-950)', 1000: 'var(--rad-ui-color-green-1000)' }, + 'green-alpha': { + 50: 'var(--rad-ui-color-green-alpha-50)', + 100: 'var(--rad-ui-color-green-alpha-100)', + 200: 'var(--rad-ui-color-green-alpha-200)', + 300: 'var(--rad-ui-color-green-alpha-300)', + 400: 'var(--rad-ui-color-green-alpha-400)', + 500: 'var(--rad-ui-color-green-alpha-500)', + 600: 'var(--rad-ui-color-green-alpha-600)', + 700: 'var(--rad-ui-color-green-alpha-700)', + 800: 'var(--rad-ui-color-green-alpha-800)', + 900: 'var(--rad-ui-color-green-alpha-900)', + 950: 'var(--rad-ui-color-green-alpha-950)', + 1000: 'var(--rad-ui-color-green-alpha-1000)' + }, grass: { 50: 'var(--rad-ui-color-grass-50)', 100: 'var(--rad-ui-color-grass-100)', From f027592caa055ae26334470d523f85496c3acad1 Mon Sep 17 00:00:00 2001 From: GoldGroove06 <73437174+GoldGroove06@users.noreply.github.com> Date: Mon, 6 Oct 2025 17:20:24 +0530 Subject: [PATCH 2/2] tokens --- .../clarity/tokens/colors/green-alpha.ts | 32 ++++++++++++++++ .../clarity/tokens/colors/index.ts | 6 ++- .../clarity/tokens/colors/red-alpha.ts | 37 +++++++++++++++++++ 3 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 src/design-systems/clarity/tokens/colors/green-alpha.ts create mode 100644 src/design-systems/clarity/tokens/colors/red-alpha.ts diff --git a/src/design-systems/clarity/tokens/colors/green-alpha.ts b/src/design-systems/clarity/tokens/colors/green-alpha.ts new file mode 100644 index 000000000..4007ee755 --- /dev/null +++ b/src/design-systems/clarity/tokens/colors/green-alpha.ts @@ -0,0 +1,32 @@ +const greenAlpha = { + light: { + 50: 'oklch(0.96 0.05 152 / 0.015)', + 100: 'oklch(0.91 0.07 151 / 0.04)', + 200: 'oklch(0.89 0.08 150 / 0.1)', + 300: 'oklch(0.88 0.09 150 / 0.16)', + 400: 'oklch(0.88 0.10 149 / 0.23)', + 500: 'oklch(0.82 0.12 149 / 0.32)', + 600: 'oklch(0.79 0.12 149 / 0.44)', + 700: 'oklch(0.79 0.12 149 / 0.64)', + 800: 'oklch(0.77 0.12 150 / 0.81)', + 900: 'oklch(0.74 0.12 150 / 0.83)', + 950: 'oklch(0.66 0.12 150 / 0.87)', + 1000: 'oklch(0.48 0.11 149 / 0.9)', + }, + dark: { + 50: 'oklch(0.96 0.05 152 / 0.015)', + 100: 'oklch(0.91 0.07 151 / 0.04)', + 200: 'oklch(0.89 0.08 150 / 0.1)', + 300: 'oklch(0.88 0.09 150 / 0.16)', + 400: 'oklch(0.88 0.10 149 / 0.23)', + 500: 'oklch(0.82 0.12 149 / 0.32)', + 600: 'oklch(0.79 0.12 149 / 0.44)', + 700: 'oklch(0.79 0.12 149 / 0.64)', + 800: 'oklch(0.77 0.12 150 / 0.81)', + 900: 'oklch(0.74 0.12 150 / 0.83)', + 950: 'oklch(0.66 0.12 150 / 0.87)', + 1000: 'oklch(0.48 0.11 149 / 0.9)', + }, +} as const; + +export default greenAlpha \ No newline at end of file diff --git a/src/design-systems/clarity/tokens/colors/index.ts b/src/design-systems/clarity/tokens/colors/index.ts index 2a4018273..a664ca03a 100644 --- a/src/design-systems/clarity/tokens/colors/index.ts +++ b/src/design-systems/clarity/tokens/colors/index.ts @@ -29,6 +29,8 @@ import lime from './lime'; import yellow from './yellow'; import amber from './amber'; import orange from './orange'; +import redAlpha from './red-alpha'; +import greenAlpha from './green-alpha'; const colors = { gray, @@ -61,7 +63,9 @@ const colors = { lime, yellow, amber, - orange + orange, + 'red-alpha': redAlpha, + 'green-alpha': greenAlpha } as const; diff --git a/src/design-systems/clarity/tokens/colors/red-alpha.ts b/src/design-systems/clarity/tokens/colors/red-alpha.ts new file mode 100644 index 000000000..630a26116 --- /dev/null +++ b/src/design-systems/clarity/tokens/colors/red-alpha.ts @@ -0,0 +1,37 @@ + + +const redAlpha = { + light: { + 50: 'oklch(0.99 0.004 15 / 0.01)', + 100: 'oklch(0.98 0.01 16 / 0.03)', + 200: 'oklch(0.97 0.023 16 / 0.08)', + 300: 'oklch(0.94 0.041 16 / 0.14)', + 400: 'oklch(0.91 0.06 16 / 0.20)', + 500: 'oklch(0.87 0.075 16 / 0.26)', + 600: 'oklch(0.81 0.094 15 / 0.34)', + 700: 'oklch(0.75 0.114 15 / 0.44)', + 800: 'oklch(0.61 0.17 14 / 0.72)', + 900: 'oklch(0.56 0.17 14 / 0.76)', + 950: 'oklch(0.5 0.17 14 / 0.83)', + 1000: 'oklch(0.3 0.093 10 / 0.91)' +}, + dark: { + 50: 'oklch(0.99 0.004 15 / 0.01)', + 100: 'oklch(0.98 0.01 16 / 0.03)', + 200: 'oklch(0.97 0.023 16 / 0.08)', + 300: 'oklch(0.94 0.041 16 / 0.14)', + 400: 'oklch(0.91 0.06 16 / 0.20)', + 500: 'oklch(0.87 0.075 16 / 0.26)', + 600: 'oklch(0.81 0.094 15 / 0.34)', + 700: 'oklch(0.75 0.114 15 / 0.44)', + 800: 'oklch(0.61 0.17 14 / 0.72)', + 900: 'oklch(0.56 0.17 14 / 0.76)', + 950: 'oklch(0.5 0.17 14 / 0.83)', + 1000: 'oklch(0.3 0.093 10 / 0.91)' +} +} as const; + +export default redAlpha; + + +