Skip to content
This repository has been archived by the owner on Dec 10, 2024. It is now read-only.

Commit

Permalink
add: brand color variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@saeidex
saeidex committed Sep 19, 2024
1 parent cb8d1fb commit e54e97b
Show file tree
Hide file tree
Showing 3 changed files with 213 additions and 119 deletions.
198 changes: 99 additions & 99 deletions apps/nextjs/src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,110 +4,110 @@

@layer base {
:root {
--md-sys-color-primary: rgb(101 97 0);
--md-sys-color-surface-tint: rgb(101 97 0);
--md-sys-color-on-primary: rgb(255 255 255);
--md-sys-color-primary-container: rgb(211 202 28);
--md-sys-color-on-primary-container: rgb(58 55 0);
--md-sys-color-secondary: rgb(100 96 35);
--md-sys-color-on-secondary: rgb(255 255 255);
--md-sys-color-secondary-container: rgb(237 231 155);
--md-sys-color-on-secondary-container: rgb(78 75 15);
--md-sys-color-tertiary: rgb(41 108 0);
--md-sys-color-on-tertiary: rgb(255 255 255);
--md-sys-color-tertiary-container: rgb(141 218 101);
--md-sys-color-on-tertiary-container: rgb(21 63 0);
--md-sys-color-error: rgb(186 26 26);
--md-sys-color-on-error: rgb(255 255 255);
--md-sys-color-error-container: rgb(255 218 214);
--md-sys-color-on-error-container: rgb(65 0 2);
--md-sys-color-background: rgb(254 249 232);
--md-sys-color-on-background: rgb(29 28 17);
--md-sys-color-surface: rgb(254 249 232);
--md-sys-color-on-surface: rgb(29 28 17);
--md-sys-color-surface-variant: rgb(232 227 200);
--md-sys-color-on-surface-variant: rgb(73 71 52);
--md-sys-color-outline: rgb(122 120 97);
--md-sys-color-outline-variant: rgb(203 199 173);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(50 49 37);
--md-sys-color-inverse-on-surface: rgb(245 241 223);
--md-sys-color-inverse-primary: rgb(212 203 30);
--md-sys-color-primary-fixed: rgb(241 231 62);
--md-sys-color-on-primary-fixed: rgb(30 28 0);
--md-sys-color-primary-fixed-dim: rgb(212 203 30);
--md-sys-color-on-primary-fixed-variant: rgb(76 72 0);
--md-sys-color-secondary-fixed: rgb(235 229 154);
--md-sys-color-on-secondary-fixed: rgb(30 28 0);
--md-sys-color-secondary-fixed-dim: rgb(207 201 129);
--md-sys-color-on-secondary-fixed-variant: rgb(76 72 12);
--md-sys-color-tertiary-fixed: rgb(168 247 125);
--md-sys-color-on-tertiary-fixed: rgb(8 33 0);
--md-sys-color-tertiary-fixed-dim: rgb(141 218 100);
--md-sys-color-on-tertiary-fixed-variant: rgb(29 82 0);
--md-sys-color-surface-dim: rgb(222 218 201);
--md-sys-color-surface-bright: rgb(254 249 232);
--md-sys-color-surface-container-lowest: rgb(255 255 255);
--md-sys-color-surface-container-low: rgb(248 244 226);
--md-sys-color-surface-container: rgb(242 238 220);
--md-sys-color-surface-container-high: rgb(237 232 215);
--md-sys-color-surface-container-highest: rgb(231 227 209);
--md-sys-color-primary: 58 100% 20%;
--md-sys-color-surface-tint: 58 100% 20%;
--md-sys-color-on-primary: 0 0% 100%;
--md-sys-color-primary-container: 57 77% 47%;
--md-sys-color-on-primary-container: 57 100% 11%;
--md-sys-color-secondary: 56 48% 26%;
--md-sys-color-on-secondary: 0 0% 100%;
--md-sys-color-secondary-container: 56 69% 77%;
--md-sys-color-on-secondary-container: 57 68% 18%;
--md-sys-color-tertiary: 97 100% 21%;
--md-sys-color-on-tertiary: 0 0% 100%;
--md-sys-color-tertiary-container: 99 61% 63%;
--md-sys-color-on-tertiary-container: 100 100% 12%;
--md-sys-color-error: 0 75% 42%;
--md-sys-color-on-error: 0 0% 100%;
--md-sys-color-error-container: 6 100% 92%;
--md-sys-color-on-error-container: 358 100% 13%;
--md-sys-color-background: 46 92% 95%;
--md-sys-color-on-background: 55 26% 9%;
--md-sys-color-surface: 46 92% 95%;
--md-sys-color-on-surface: 55 26% 9%;
--md-sys-color-surface-variant: 51 41% 85%;
--md-sys-color-on-surface-variant: 54 17% 25%;
--md-sys-color-outline: 55 11% 43%;
--md-sys-color-outline-variant: 52 22% 74%;
--md-sys-color-shadow: 0 0% 0%;
--md-sys-color-scrim: 0 0% 0%;
--md-sys-color-inverse-surface: 55 15% 17%;
--md-sys-color-inverse-on-surface: 49 52% 92%;
--md-sys-color-inverse-primary: 57 75% 47%;
--md-sys-color-primary-fixed: 57 86% 59%;
--md-sys-color-on-primary-fixed: 56 100% 6%;
--md-sys-color-primary-fixed-dim: 57 75% 47%;
--md-sys-color-on-primary-fixed-variant: 57 100% 15%;
--md-sys-color-secondary-fixed: 56 67% 76%;
--md-sys-color-on-secondary-fixed: 56 100% 6%;
--md-sys-color-secondary-fixed-dim: 55 45% 66%;
--md-sys-color-on-secondary-fixed-variant: 56 73% 17%;
--md-sys-color-tertiary-fixed: 99 88% 73%;
--md-sys-color-on-tertiary-fixed: 105 100% 6%;
--md-sys-color-tertiary-fixed-dim: 99 61% 62%;
--md-sys-color-on-tertiary-fixed-variant: 99 100% 16%;
--md-sys-color-surface-dim: 49 24% 83%;
--md-sys-color-surface-bright: 46 92% 95%;
--md-sys-color-surface-container-lowest: 0 0% 100%;
--md-sys-color-surface-container-low: 49 61% 93%;
--md-sys-color-surface-container: 49 46% 91%;
--md-sys-color-surface-container-high: 46 38% 89%;
--md-sys-color-surface-container-highest: 49 31% 86%;

--radius: 0.5rem;
}

.dark {
--md-sys-color-primary: rgb(239 229 60);
--md-sys-color-surface-tint: rgb(212 203 30);
--md-sys-color-on-primary: rgb(52 50 0);
--md-sys-color-primary-container: rgb(196 187 0);
--md-sys-color-on-primary-container: rgb(46 44 0);
--md-sys-color-secondary: rgb(207 201 129);
--md-sys-color-on-secondary: rgb(52 50 0);
--md-sys-color-secondary-container: rgb(68 65 5);
--md-sys-color-on-secondary-container: rgb(221 215 141);
--md-sys-color-tertiary: rgb(166 244 123);
--md-sys-color-on-tertiary: rgb(18 56 0);
--md-sys-color-tertiary-container: rgb(126 201 86);
--md-sys-color-on-tertiary-container: rgb(15 49 0);
--md-sys-color-error: rgb(255 180 171);
--md-sys-color-on-error: rgb(105 0 5);
--md-sys-color-error-container: rgb(147 0 10);
--md-sys-color-on-error-container: rgb(255 218 214);
--md-sys-color-background: rgb(21 20 10);
--md-sys-color-on-background: rgb(231 227 209);
--md-sys-color-surface: rgb(21 20 10);
--md-sys-color-on-surface: rgb(231 227 209);
--md-sys-color-surface-variant: rgb(73 71 52);
--md-sys-color-on-surface-variant: rgb(203 199 173);
--md-sys-color-outline: rgb(149 145 122);
--md-sys-color-outline-variant: rgb(73 71 52);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(231 227 209);
--md-sys-color-inverse-on-surface: rgb(50 49 37);
--md-sys-color-inverse-primary: rgb(101 97 0);
--md-sys-color-primary-fixed: rgb(241 231 62);
--md-sys-color-on-primary-fixed: rgb(30 28 0);
--md-sys-color-primary-fixed-dim: rgb(212 203 30);
--md-sys-color-on-primary-fixed-variant: rgb(76 72 0);
--md-sys-color-secondary-fixed: rgb(235 229 154);
--md-sys-color-on-secondary-fixed: rgb(30 28 0);
--md-sys-color-secondary-fixed-dim: rgb(207 201 129);
--md-sys-color-on-secondary-fixed-variant: rgb(76 72 12);
--md-sys-color-tertiary-fixed: rgb(168 247 125);
--md-sys-color-on-tertiary-fixed: rgb(8 33 0);
--md-sys-color-tertiary-fixed-dim: rgb(141 218 100);
--md-sys-color-on-tertiary-fixed-variant: rgb(29 82 0);
--md-sys-color-surface-dim: rgb(21 20 10);
--md-sys-color-surface-bright: rgb(59 58 45);
--md-sys-color-surface-container-lowest: rgb(15 15 6);
--md-sys-color-surface-container-low: rgb(29 28 17);
--md-sys-color-surface-container: rgb(33 32 21);
--md-sys-color-surface-container-high: rgb(44 42 31);
--md-sys-color-surface-container-highest: rgb(54 53 41);
--md-sys-color-primary: 57 85% 59%;
--md-sys-color-surface-tint: 57 75% 47%;
--md-sys-color-on-primary: 58 100% 10%;
--md-sys-color-primary-container: 57 100% 38%;
--md-sys-color-on-primary-container: 57 100% 9%;
--md-sys-color-secondary: 55 45% 66%;
--md-sys-color-on-secondary: 58 100% 10%;
--md-sys-color-secondary-container: 57 86% 14%;
--md-sys-color-on-secondary-container: 55 54% 71%;
--md-sys-color-tertiary: 99 85% 72%;
--md-sys-color-on-tertiary: 101 100% 11%;
--md-sys-color-tertiary-container: 99 52% 56%;
--md-sys-color-on-tertiary-container: 102 100% 10%;
--md-sys-color-error: 6 100% 84%;
--md-sys-color-on-error: 357 100% 21%;
--md-sys-color-error-container: 356 100% 29%;
--md-sys-color-on-error-container: 6 100% 92%;
--md-sys-color-background: 55 35% 6%;
--md-sys-color-on-background: 49 31% 86%;
--md-sys-color-surface: 55 35% 6%;
--md-sys-color-on-surface: 49 31% 86%;
--md-sys-color-surface-variant: 54 17% 25%;
--md-sys-color-on-surface-variant: 52 22% 74%;
--md-sys-color-outline: 51 11% 53%;
--md-sys-color-outline-variant: 54 17% 25%;
--md-sys-color-shadow: 0 0% 0%;
--md-sys-color-scrim: 0 0% 0%;
--md-sys-color-inverse-surface: 49 31% 86%;
--md-sys-color-inverse-on-surface: 55 15% 17%;
--md-sys-color-inverse-primary: 58 100% 20%;
--md-sys-color-primary-fixed: 57 86% 59%;
--md-sys-color-on-primary-fixed: 56 100% 6%;
--md-sys-color-primary-fixed-dim: 57 75% 47%;
--md-sys-color-on-primary-fixed-variant: 57 100% 15%;
--md-sys-color-secondary-fixed: 56 67% 76%;
--md-sys-color-on-secondary-fixed: 56 100% 6%;
--md-sys-color-secondary-fixed-dim: 55 45% 66%;
--md-sys-color-on-secondary-fixed-variant: 56 73% 17%;
--md-sys-color-tertiary-fixed: 99 88% 73%;
--md-sys-color-on-tertiary-fixed: 105 100% 6%;
--md-sys-color-tertiary-fixed-dim: 99 61% 62%;
--md-sys-color-on-tertiary-fixed-variant: 99 100% 16%;
--md-sys-color-surface-dim: 55 35% 6%;
--md-sys-color-surface-bright: 56 13% 20%;
--md-sys-color-surface-container-lowest: 60 43% 4%;
--md-sys-color-surface-container-low: 55 26% 9%;
--md-sys-color-surface-container: 55 22% 11%;
--md-sys-color-surface-container-high: 51 17% 15%;
--md-sys-color-surface-container-highest: 55 14% 19%;

--ring: 240 4.9% 83.9%;
--radius: 0.5rem;
}
}
93 changes: 93 additions & 0 deletions apps/nextjs/tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,99 @@ export default {
sans: ["var(--font-geist-sans)", ...fontFamily.sans],
mono: ["var(--font-geist-mono)", ...fontFamily.mono],
},
colors: {
primary: {
DEFAULT: "hsl(var(--md-sys-color-primary))",
container: "hsl(var(--md-sys-color-primary-container))",
fixed: {
DEFAULT: "hsl(var(--md-sys-color-primary-fixed))",
dim: "hsl(var(--md-sys-color-primary-fixed-dim))",
},
},
secondary: {
DEFAULT: "hsl(var(--md-sys-color-secondary))",
container: "hsl(var(--md-sys-color-secondary-container))",
fixed: {
DEFAULT: "hsl(var(--md-sys-color-secondary-fixed))",
dim: "hsl(var(--md-sys-color-secondary-fixed-dim))",
},
},
tertiary: {
DEFAULT: "hsl(var(--md-sys-color-tertiary))",
container: "hsl(var(--md-sys-color-tertiary-container))",
fixed: {
DEFAULT: "hsl(var(--md-sys-color-tertiary-fixed))",
dim: "hsl(var(--md-sys-color-tertiary-fixed-dim))",
},
},
error: {
DEFAULT: "hsl(var(--md-sys-color-error))",
container: "hsl(var(--md-sys-color-error-container))",
},
background: "hsl(var(--md-sys-color-background))",
surface: {
DEFAULT: "hsl(var(--md-sys-color-surface))",
tint: "hsl(var(--md-sys-color-surface-tint))",
variant: "hsl(var(--md-sys-color-surface-variant))",
dim: "hsl(var(--md-sys-color-surface-dim))",
bright: "hsl(var(--md-sys-color-surface-bright))",
container: {
lowest: "hsl(var(--md-sys-color-surface-container-lowest))",
low: "hsl(var(--md-sys-color-surface-container-low))",
DEFAULT: "hsl(var(--md-sys-color-surface-container))",
high: "hsl(var(--md-sys-color-surface-container-high))",
highest: "hsl(var(--md-sys-color-surface-container-highest))",
},
},
outline: {
DEFAULT: "hsl(var(--md-sys-color-outline))",
variant: "hsl(var(--md-sys-color-outline-variant))",
},
shadow: "hsl(var(--md-sys-color-shadow))",
scrim: "hsl(var(--md-sys-color-scrim))",
inverse: {
surface: "hsl(var(--md-sys-color-inverse-surface))",
on: {
surface: "hsl(var(--md-sys-color-inverse-on-surface))",
},
primary: "hsl(var(--md-sys-color-inverse-primary))",
},
on: {
primary: {
DEFAULT: "hsl(var(--md-sys-color-on-primary))",
container: "hsl(var(--md-sys-color-on-primary-container))",
fixed: {
DEFAULT: "hsl(var(--md-sys-color-on-primary-fixed))",
variant: "hsl(var(--md-sys-color-on-primary-fixed-variant))",
},
},
secondary: {
DEFAULT: "hsl(var(--md-sys-color-on-secondary))",
container: "hsl(var(--md-sys-color-on-secondary-container))",
fixed: {
DEFAULT: "hsl(var(--md-sys-color-on-secondary-fixed))",
variant: "hsl(var(--md-sys-color-on-secondary-fixed-variant))",
},
},
tertiary: {
DEFAULT: "hsl(var(--md-sys-color-on-tertiary))",
container: "hsl(var(--md-sys-color-on-tertiary-container))",
fixed: {
DEFAULT: "hsl(var(--md-sys-color-on-tertiary-fixed))",
variant: "hsl(var(--md-sys-color-on-tertiary-fixed-variant))",
},
},
error: {
DEFAULT: "hsl(var(--md-sys-color-on-error))",
container: "hsl(var(--md-sys-color-on-error-container))",
},
background: "hsl(var(--md-sys-color-on-background))",
surface: {
DEFAULT: "hsl(var(--md-sys-color-on-surface))",
variant: "hsl(var(--md-sys-color-on-surface-variant))",
},
},
},
},
},
} satisfies Config;
41 changes: 21 additions & 20 deletions tooling/tailwind/base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,43 +5,44 @@ export default {
content: ["src/**/*.{ts,tsx}"],
theme: {
extend: {
// shadcn colors tweaked
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
border: "hsl(var(--md-sys-color-outline))",
input: "hsl(var(--md-sys-color-surface-container-low))",
ring: "hsl(var(--md-sys-color-outline-variant))",
background: "hsl(var(--md-sys-color-background))",
foreground: "hsl(var(--md-sys-color-on-background))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
DEFAULT: "hsl(var(--md-sys-color-primary))",
foreground: "hsl(var(--md-sys-color-on-primary))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
DEFAULT: "hsl(var(--md-sys-color-secondary))",
foreground: "hsl(var(--md-sys-color-on-secondary))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
DEFAULT: "hsl(var(--md-sys-color-error))",
foreground: "hsl(var(--md-sys-color-on-error))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
DEFAULT: "hsl(var(--md-sys-color-surface-dim))",
foreground: "hsl(var(--md-sys-color-on-surface))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
DEFAULT: "hsl(var(--md-sys-color-tertiary))",
foreground: "hsl(var(--md-sys-color-on-tertiary))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
DEFAULT: "hsl(var(--md-sys-color-secondary-container))",
foreground: "hsl(var(--md-sys-color-secondary-container))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
DEFAULT: "hsl(var(--md-sys-color-primary-container))",
foreground: "hsl(var(--md-sys-color-on-primary-container))",
},
},
borderColor: {
DEFAULT: "hsl(var(--border))",
DEFAULT: "hsl(var(--md-sys-color-outline))",
},
},
},
Expand Down

0 comments on commit e54e97b

Please sign in to comment.