Skip to content

Commit 908dbb9

Browse files
bjohansebasbjohansebas
authored
style: update theme color variables to use CSS custom properties
1 parent 217fb54 commit 908dbb9

File tree

4 files changed

+109
-207
lines changed

4 files changed

+109
-207
lines changed

‎apps/site/app/[locale]/next-data/og/[category]/[title]/route.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@ import HexagonGrid from '@/components/Icons/HexagonGrid';
44
import JsIconWhite from '@/components/Icons/Logos/JsIconWhite';
55
import { DEFAULT_CATEGORY_OG_TYPE } from '@/next.constants.mjs';
66
import { defaultLocale } from '@/next.locales.mjs';
7-
import tailwindConfig from '@/tailwind.config';
87
import { hexToRGBA } from '@/util/hexToRGBA';
98

109
const CATEGORY_TO_THEME_COLOUR_MAP = {
11-
announcement: tailwindConfig.theme.colors.green['700'],
12-
release: tailwindConfig.theme.colors.info['600'],
13-
vulnerability: tailwindConfig.theme.colors.warning['600'],
10+
announcement: 'var(--color-green-900)',
11+
release: 'var(--color-info-600)',
12+
vulnerability: 'var(--color-warning-600)',
1413
};
1514

1615
type Category = keyof typeof CATEGORY_TO_THEME_COLOUR_MAP;

‎apps/site/components/Common/Search/utils.ts

+32-35
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,43 @@
1-
import tailwindConfig from '@/tailwind.config';
2-
3-
const colors = tailwindConfig.theme.colors;
41
export const themeConfig = {
52
typography: {
63
'--font-primary': 'var(--font-open-sans)',
74
},
85
colors: {
96
light: {
10-
'--text-color-primary': colors.neutral[900],
11-
'--text-color-accent': colors.green[600],
12-
'--background-color-secondary': colors.neutral[100],
13-
'--background-color-tertiary': colors.neutral[300],
14-
'--border-color-accent': colors.green[600],
15-
'--border-color-primary': colors.neutral[200],
16-
'--border-color-tertiary': colors.green[700],
17-
'--button-background-color-primary': colors.green[600],
18-
'--button-background-color-secondary': colors.white,
19-
'--button-background-color-secondary-hover': colors.neutral[100],
20-
'--button-border-color-secondary': colors.neutral[300],
21-
'--button-text-color-secondary': colors.neutral[900],
22-
'--chat-button-border-color-gradientThree': colors.green[400],
23-
'--chat-button-border-color-gradientFour': colors.green[700],
24-
'--chat-button-background-color-gradientOne': colors.green[600],
25-
'--chat-button-background-color-gradientTwo': colors.green[300],
7+
'--text-color-primary': 'var(--text-neutral-900)',
8+
'--text-color-accent': 'var(--text-green-600)',
9+
'--background-color-secondary': 'var(--bg-neutral-100)',
10+
'--background-color-tertiary': 'var(--bg-neutral-300)',
11+
'--border-color-accent': 'var(--border-green-600)',
12+
'--border-color-primary': 'var(--border-neutral-200)',
13+
'--border-color-tertiary': 'var(--border-green-700)',
14+
'--button-background-color-primary': 'var(--bg-green-600)',
15+
'--button-background-color-secondary': 'var(--bg-white)',
16+
'--button-background-color-secondary-hover': 'var(--bg-neutral-100)',
17+
'--button-border-color-secondary': 'var(--border-neutral-200)',
18+
'--button-text-color-secondary': 'var(--text-neutral-900)',
19+
'--chat-button-border-color-gradientThree': 'var(--border-green-700)',
20+
'--chat-button-border-color-gradientFour': 'var(--border-green-600)',
21+
'--chat-button-background-color-gradientOne': 'var(--bg-green-600)',
22+
'--chat-button-background-color-gradientTwo': 'var(--bg-green-300)',
2623
},
2724
dark: {
28-
'--text-color-primary': colors.neutral[100],
29-
'--text-color-accent': colors.green[400],
30-
'--background-color-secondary': colors.neutral[950],
31-
'--background-color-tertiary': colors.neutral[900],
32-
'--border-color-accent': colors.green[400],
33-
'--border-color-primary': colors.neutral[900],
34-
'--border-color-tertiary': colors.green[300],
35-
'--button-background-color-primary': colors.green[400],
36-
'--button-background-color-secondary': colors.neutral[950],
37-
'--button-background-color-secondary-hover': colors.neutral[900],
38-
'--button-border-color-secondary': colors.neutral[900],
39-
'--button-text-color-secondary': colors.neutral[200],
40-
'--chat-button-border-color-gradientThree': colors.green[400],
41-
'--chat-button-border-color-gradientFour': colors.green[700],
42-
'--chat-button-background-color-gradientOne': colors.green[400],
43-
'--chat-button-background-color-gradientTwo': colors.green[800],
25+
'--text-color-primary': 'var(--text-neutral-100)',
26+
'--text-color-accent': 'var(--text-green-400)',
27+
'--background-color-secondary': 'var(--bg-neutral-950)',
28+
'--background-color-tertiary': 'var(--bg-neutral-900)',
29+
'--border-color-accent': 'var(--border-green-400)',
30+
'--border-color-primary': 'var(--border-neutral-900)',
31+
'--border-color-tertiary': 'var(--border-green-300)',
32+
'--button-background-color-primary': 'var(--bg-green-600)',
33+
'--button-background-color-secondary': 'var(--bg-neutral-900)',
34+
'--button-background-color-secondary-hover': 'var(--bg-neutral-800)',
35+
'--button-border-color-secondary': 'var(--border-neutral-900)',
36+
'--button-text-color-secondary': 'var(--text-neutral-200)',
37+
'--chat-button-border-color-gradientThree': 'var(--border-green-400)',
38+
'--chat-button-border-color-gradientFour': 'var(--border-green-700)',
39+
'--chat-button-background-color-gradientOne': 'var(--bg-green-400)',
40+
'--chat-button-background-color-gradientTwo': 'var(--bg-green-800)',
4441
},
4542
},
4643
};

‎apps/site/styles/index.css

+74-74
Original file line numberDiff line numberDiff line change
@@ -15,81 +15,81 @@
1515
@config '../tailwind.config.ts';
1616

1717
@theme {
18-
--green-100: #edf2eb;
19-
--green-200: #c5e5b4;
20-
--green-300: #99cc7d;
21-
--green-400: #84ba64;
22-
--green-500: #5fa04e;
23-
--green-600: #417e38;
24-
--green-700: #2c682c;
25-
--green-800: #2c682c;
26-
--green-900: #1a3f1d;
27-
--neutral-100: #f6f7f9;
28-
--neutral-200: #e9edf0;
29-
--neutral-300: #d9e1e4;
30-
--neutral-400: #cbd4d9;
31-
--neutral-500: #b1bcc2;
32-
--neutral-600: #929fa5;
33-
--neutral-700: #6e7b83;
34-
--neutral-800: #556066;
35-
--neutral-900: #2c3437;
36-
--neutral-950: #0d121c;
37-
--danger-100: #fbf1f0;
38-
--danger-200: #fad3d4;
39-
--danger-300: #fab6b7;
40-
--danger-400: #fa8e8e;
41-
--danger-500: #f65354;
42-
--danger-600: #de1a1b;
43-
--danger-700: #b80c0c;
44-
--danger-800: #900e0e;
45-
--danger-900: #661514;
46-
--warning-100: #fdf3e7;
47-
--warning-200: #fad9b0;
48-
--warning-300: #f5bc75;
49-
--warning-400: #e99c40;
50-
--warning-500: #d07912;
51-
--warning-600: #ae5f00;
52-
--warning-700: #8b4d04;
53-
--warning-800: #683d08;
54-
--warning-900: #4d2f0b;
55-
--info-100: #e9f4fa;
56-
--info-200: #bce6fc;
57-
--info-300: #8ed4f8;
58-
--info-400: #52baed;
59-
--info-500: #229ad6;
60-
--info-600: #0c7bb3;
61-
--info-700: #066291;
62-
--info-800: #074d71;
63-
--info-900: #0a3953;
64-
--accent1-100: #f7f1fb;
65-
--accent1-200: #ead9fb;
66-
--accent1-300: #dbbdf9;
67-
--accent1-400: #c79bf2;
68-
--accent1-500: #af74e8;
69-
--accent1-600: #9756d6;
70-
--accent1-700: #7d3cbe;
71-
--accent1-800: #642b9e;
72-
--accent1-900: #361b52;
73-
--accent2-100: #fbf0f4;
74-
--accent2-200: #fbd4e6;
75-
--accent2-300: #fbb4d2;
76-
--accent2-400: #f68bb7;
77-
--accent2-500: #ed5393;
78-
--accent2-600: #d6246e;
79-
--accent2-700: #b01356;
80-
--accent2-800: #8b1245;
81-
--accent2-900: #411526;
82-
--pulse-100: #0000330f;
83-
--pulse-200: #00002d17;
84-
--pulse-300: #ddeaf814;
85-
--pulse-400: #d3edf81d;
86-
--white: #fff;
87-
--transparent: 'transparent';
88-
--shadow: #101828;
18+
--color-green-100: #edf2eb;
19+
--color-green-200: #c5e5b4;
20+
--color-green-300: #99cc7d;
21+
--color-green-400: #84ba64;
22+
--color-green-500: #5fa04e;
23+
--color-green-600: #417e38;
24+
--color-green-700: #2c682c;
25+
--color-green-800: #2c682c;
26+
--color-green-900: #1a3f1d;
27+
--color-neutral-100: #f6f7f9;
28+
--color-neutral-200: #e9edf0;
29+
--color-neutral-300: #d9e1e4;
30+
--color-neutral-400: #cbd4d9;
31+
--color-neutral-500: #b1bcc2;
32+
--color-neutral-600: #929fa5;
33+
--color-neutral-700: #6e7b83;
34+
--color-neutral-800: #556066;
35+
--color-neutral-900: #2c3437;
36+
--color-neutral-950: #0d121c;
37+
--color-danger-100: #fbf1f0;
38+
--color-danger-200: #fad3d4;
39+
--color-danger-300: #fab6b7;
40+
--color-danger-400: #fa8e8e;
41+
--color-danger-500: #f65354;
42+
--color-danger-600: #de1a1b;
43+
--color-danger-700: #b80c0c;
44+
--color-danger-800: #900e0e;
45+
--color-danger-900: #661514;
46+
--color-warning-100: #fdf3e7;
47+
--color-warning-200: #fad9b0;
48+
--color-warning-300: #f5bc75;
49+
--color-warning-400: #e99c40;
50+
--color-warning-500: #d07912;
51+
--color-warning-600: #ae5f00;
52+
--color-warning-700: #8b4d04;
53+
--color-warning-800: #683d08;
54+
--color-warning-900: #4d2f0b;
55+
--color-info-100: #e9f4fa;
56+
--color-info-200: #bce6fc;
57+
--color-info-300: #8ed4f8;
58+
--color-info-400: #52baed;
59+
--color-info-500: #229ad6;
60+
--color-info-600: #0c7bb3;
61+
--color-info-700: #066291;
62+
--color-info-800: #074d71;
63+
--color-info-900: #0a3953;
64+
--color-accent1-100: #f7f1fb;
65+
--color-accent1-200: #ead9fb;
66+
--color-accent1-300: #dbbdf9;
67+
--color-accent1-400: #c79bf2;
68+
--color-accent1-500: #af74e8;
69+
--color-accent1-600: #9756d6;
70+
--color-accent1-700: #7d3cbe;
71+
--color-accent1-800: #642b9e;
72+
--color-accent1-900: #361b52;
73+
--color-accent2-100: #fbf0f4;
74+
--color-accent2-200: #fbd4e6;
75+
--color-accent2-300: #fbb4d2;
76+
--color-accent2-400: #f68bb7;
77+
--color-accent2-500: #ed5393;
78+
--color-accent2-600: #d6246e;
79+
--color-accent2-700: #b01356;
80+
--color-accent2-800: #8b1245;
81+
--color-accent2-900: #411526;
82+
--color-pulse-100: #0000330f;
83+
--color-pulse-200: #00002d17;
84+
--color-pulse-300: #ddeaf814;
85+
--color-pulse-400: #d3edf81d;
86+
--color-white: #fff;
87+
--color-transparent: 'transparent';
88+
--color-shadow: #101828;
8989
--inherit: 'inherit';
90-
--shadow-xs: 0px 1px 2px 0px --theme(--color-shadow / 5%);
91-
--shadow-lg: 0px 4px 6px -2px --theme(--color-shadow / 3%),
92-
0px 12px 16px -4px --theme(--color-shadow / 8%);
90+
--shadow-xs: 0px 1px 2px 0px var(--color-shadow) / 5%;
91+
--shadow-lg: 0px 4px 6px -2px var(--color-shadow) / 3%,
92+
0px 12px 16px -4px var(--color-shadow) / 8%;
9393
--font-open-sans: var(--font-open-sans);
9494
--font-ibm-plex-mono: var(--font-ibm-plex-mono);
9595
--font-weight-regular: '400';

‎apps/site/tailwind.config.ts

-94
Original file line numberDiff line numberDiff line change
@@ -12,97 +12,7 @@ export default {
1212
'./app/**/*.tsx',
1313
],
1414
theme: {
15-
colors: {
16-
green: {
17-
100: '#EDF2EB',
18-
200: '#C5E5B4',
19-
300: '#99CC7D',
20-
400: '#84BA64',
21-
500: '#5FA04E',
22-
600: '#417E38',
23-
700: '#2C682C',
24-
800: '#2C682C',
25-
900: '#1A3F1D',
26-
},
27-
neutral: {
28-
100: '#F6F7F9',
29-
200: '#E9EDF0',
30-
300: '#D9E1E4',
31-
400: '#CBD4D9',
32-
500: '#B1BCC2',
33-
600: '#929FA5',
34-
700: '#6E7B83',
35-
800: '#556066',
36-
900: '#2C3437',
37-
950: '#0D121C',
38-
},
39-
danger: {
40-
100: '#FBF1F0',
41-
200: '#FAD3D4',
42-
300: '#FAB6B7',
43-
400: '#FA8E8E',
44-
500: '#F65354',
45-
600: '#DE1A1B',
46-
700: '#B80C0C',
47-
800: '#900E0E',
48-
900: '#661514',
49-
},
50-
warning: {
51-
100: '#FDF3E7',
52-
200: '#FAD9B0',
53-
300: '#F5BC75',
54-
400: '#E99C40',
55-
500: '#D07912',
56-
600: '#AE5F00',
57-
700: '#8B4D04',
58-
800: '#683D08',
59-
900: '#4D2F0B',
60-
},
61-
info: {
62-
100: '#E9F4FA',
63-
200: '#BCE6FC',
64-
300: '#8ED4F8',
65-
400: '#52BAED',
66-
500: '#229AD6',
67-
600: '#0C7BB3',
68-
700: '#066291',
69-
800: '#074D71',
70-
900: '#0A3953',
71-
},
72-
accent1: {
73-
100: '#F7F1FB',
74-
200: '#EAD9FB',
75-
300: '#DBBDF9',
76-
400: '#C79BF2',
77-
500: '#AF74E8',
78-
600: '#9756D6',
79-
700: '#7D3CBE',
80-
800: '#642B9E',
81-
900: '#361B52',
82-
},
83-
accent2: {
84-
100: '#FBF0F4',
85-
200: '#FBD4E6',
86-
300: '#FBB4D2',
87-
400: '#F68BB7',
88-
500: '#ED5393',
89-
600: '#D6246E',
90-
700: '#B01356',
91-
800: '#8B1245',
92-
900: '#411526',
93-
},
94-
pulse: {
95-
100: '#0000330F',
96-
200: '#00002D17',
97-
300: '#DDEAF814',
98-
400: '#D3EDF81D',
99-
},
100-
white: '#FFFFFF',
101-
transparent: 'transparent',
102-
shadow: '#101828',
103-
},
10415
extend: {
105-
screens: { xs: '670px' },
10616
backgroundImage: {
10717
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
10818
'gradient-subtle':
@@ -116,10 +26,6 @@ export default {
11626
'gradient-glow-backdrop':
11727
'radial-gradient(8em circle at calc(50%) 10px, theme(colors.green.500), transparent 30%)',
11828
},
119-
boxShadow: {
120-
xs: '0px 1px 2px 0px theme(colors.shadow / 5%)',
121-
lg: '0px 4px 6px -2px theme(colors.shadow / 3%), 0px 12px 16px -4px theme(colors.shadow / 8%)',
122-
},
12329
spacing: { '4.5': '1.125rem', '18': '4.5rem' },
12430
aria: { current: 'current="page"' },
12531
maxWidth: { '8xl': '95rem' },

0 commit comments

Comments
 (0)