Skip to content

Commit 9859b48

Browse files
bjohansebasbjohansebas
authored
style: update font variable naming and clean up some unused configurations in Tailwind CSS
1 parent 4575c95 commit 9859b48

File tree

4 files changed

+110
-254
lines changed

4 files changed

+110
-254
lines changed

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

Lines changed: 3 additions & 4 deletions
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‎

Lines changed: 32 additions & 35 deletions
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‎

Lines changed: 75 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -15,83 +15,83 @@
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);
94-
--ibm-plex-mono: var(--font-ibm-plex-mono);
94+
--font-ibm-plex-mono: var(--font-ibm-plex-mono);
9595
--font-weight-regular: '400';
9696
--font-weight-medium: '500';
9797
--font-weight-semibold: '600';

0 commit comments

Comments
 (0)