From 741799e4c64e280faa73b53c8da4bf01b81b749f Mon Sep 17 00:00:00 2001 From: Filip Figiel Date: Sun, 11 Feb 2024 00:47:05 +0100 Subject: [PATCH 1/7] feat: add a file with common design tokens --- styles/common.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 styles/common.css diff --git a/styles/common.css b/styles/common.css new file mode 100644 index 0000000..52cc094 --- /dev/null +++ b/styles/common.css @@ -0,0 +1,18 @@ +/* This file contains design tokens used in core Gleam projects */ +:root { + --col-black: #000000; + --col-chinese-black: #151515; + --col-eerie-black: #1e1e1e; + --col-dark-charcoal: #2f2f2f; + --col-english-violet: #584355; + --col-gray: #7e818b; + --col-dark-vanilla: #cac0a9; + --col-baby-powder: #fefefc; + --col-cosmic-latte: #fffbe8; + --col-faff-pink: #ffaff3; + --col-waterspout: #a6f0fc; + --col-deep-saffron: #ff9d35; + --col-pastel-red: #ff6262; + --col-caramel: #ffd596; + --col-menthol: #c8ffa7; +} From 4bfa39151f49bd7a5f5088af4f68966a87a6b9d6 Mon Sep 17 00:00:00 2001 From: Filip Figiel Date: Sun, 11 Feb 2024 17:50:14 +0100 Subject: [PATCH 2/7] feat: add new colors from packages site, reorganize colors --- styles/common.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/styles/common.css b/styles/common.css index 52cc094..36acc1c 100644 --- a/styles/common.css +++ b/styles/common.css @@ -1,18 +1,24 @@ /* This file contains design tokens used in core Gleam projects */ :root { + /* Grays */ --col-black: #000000; --col-chinese-black: #151515; --col-eerie-black: #1e1e1e; + --col-gunmetal: #292d3e; --col-dark-charcoal: #2f2f2f; --col-english-violet: #584355; + --col-purple-navy: #51597b; --col-gray: #7e818b; --col-dark-vanilla: #cac0a9; - --col-baby-powder: #fefefc; --col-cosmic-latte: #fffbe8; + --col-baby-powder: #fefefc; + /* Colors */ --col-faff-pink: #ffaff3; - --col-waterspout: #a6f0fc; - --col-deep-saffron: #ff9d35; --col-pastel-red: #ff6262; + --col-deep-saffron: #ff9d35; --col-caramel: #ffd596; + --col-khaki: #b1a894; + --col-bone: #e3d8be; --col-menthol: #c8ffa7; + --col-waterspout: #a6f0fc; } From a7b5dad62f3e0c3f6a9c67bf8c299d6686cbf388 Mon Sep 17 00:00:00 2001 From: Filip Figiel Date: Wed, 14 Feb 2024 20:34:13 +0100 Subject: [PATCH 3/7] fix: use simple hue names, add intensity numbers --- styles/common.css | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/styles/common.css b/styles/common.css index 36acc1c..80de10c 100644 --- a/styles/common.css +++ b/styles/common.css @@ -2,23 +2,23 @@ :root { /* Grays */ --col-black: #000000; - --col-chinese-black: #151515; - --col-eerie-black: #1e1e1e; - --col-gunmetal: #292d3e; - --col-dark-charcoal: #2f2f2f; - --col-english-violet: #584355; - --col-purple-navy: #51597b; - --col-gray: #7e818b; - --col-dark-vanilla: #cac0a9; - --col-cosmic-latte: #fffbe8; - --col-baby-powder: #fefefc; + --col-neutral-950: #151515; + --col-neutral-900: #1e1e1e; + --col-neutral-800: #2f2f2f; + --col-zinc-500: #7e818b; + --col-sepia-450: #b1a894; + --col-sepia-400: #cac0a9; + --col-sepia-300: #e3d8be; + --col-sepia-100: #fffbe8; + --col-sepia-050: #fefefc; /* Colors */ - --col-faff-pink: #ffaff3; - --col-pastel-red: #ff6262; - --col-deep-saffron: #ff9d35; - --col-caramel: #ffd596; - --col-khaki: #b1a894; - --col-bone: #e3d8be; - --col-menthol: #c8ffa7; - --col-waterspout: #a6f0fc; + --col-magenta-800: #584355; + --col-magenta-300: #ffaff3; + --col-azure-800: #292d3e; + --col-azure-600: #51597b; + --col-cyan-200: #a6f0fc; + --col-green-200: #c8ffa7; + --col-yellow-300: #ffd596; + --col-orange-400: #ff9d35; + --col-red-400: #ff6262; } From a17bf905991afa57b234a6fba15d6b114c5bae38 Mon Sep 17 00:00:00 2001 From: Filip Figiel Date: Wed, 14 Feb 2024 20:35:11 +0100 Subject: [PATCH 4/7] feat: add semantic vars --- styles/common.css | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/styles/common.css b/styles/common.css index 80de10c..a782ed5 100644 --- a/styles/common.css +++ b/styles/common.css @@ -1,6 +1,6 @@ /* This file contains design tokens used in core Gleam projects */ :root { - /* Grays */ + /* Greys */ --col-black: #000000; --col-neutral-950: #151515; --col-neutral-900: #1e1e1e; @@ -11,6 +11,7 @@ --col-sepia-300: #e3d8be; --col-sepia-100: #fffbe8; --col-sepia-050: #fefefc; + /* Colors */ --col-magenta-800: #584355; --col-magenta-300: #ffaff3; @@ -21,4 +22,18 @@ --col-yellow-300: #ffd596; --col-orange-400: #ff9d35; --col-red-400: #ff6262; + + /* Semantic colors */ + --brand-primary: var(--col-magenta-300); + + /* Light theme */ + --light-theme-background: var(--col-sepia-050); + --light-theme-text: var(--col-black); + --light-theme-text-secondary: var(--col-neutral-800); + + /* Dark theme */ + --dark-theme-background: var(--col-azure-800); + --dark-theme-background-alt: var(--col-neutral-800); + --dark-theme-text: var(--col-sepia-300); + --dark-theme-text-secondary: var(--col-sepia-450); } From bf84798f477ca3dfa786765bca1bbaf404eb9900 Mon Sep 17 00:00:00 2001 From: Filip Figiel Date: Wed, 14 Feb 2024 22:46:25 +0100 Subject: [PATCH 5/7] feat: add styles for inline code --- styles/common.css | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/styles/common.css b/styles/common.css index a782ed5..21efb8f 100644 --- a/styles/common.css +++ b/styles/common.css @@ -5,7 +5,11 @@ --col-neutral-950: #151515; --col-neutral-900: #1e1e1e; --col-neutral-800: #2f2f2f; - --col-zinc-500: #7e818b; + --col-neutral-100: #f5f5f5; + --col-azure-900: #202431; + --col-azure-800: #292d3e; + --col-azure-600: #51597b; + --col-azure-500: #7e818b; --col-sepia-450: #b1a894; --col-sepia-400: #cac0a9; --col-sepia-300: #e3d8be; @@ -15,8 +19,6 @@ /* Colors */ --col-magenta-800: #584355; --col-magenta-300: #ffaff3; - --col-azure-800: #292d3e; - --col-azure-600: #51597b; --col-cyan-200: #a6f0fc; --col-green-200: #c8ffa7; --col-yellow-300: #ffd596; @@ -25,15 +27,22 @@ /* Semantic colors */ --brand-primary: var(--col-magenta-300); + --brand-success: var(--col-green-200); + --brand-warning: var(--col-yellow-300); + --brand-error: var(--col-red-400); /* Light theme */ --light-theme-background: var(--col-sepia-050); + --light-theme-background-dim: var(--col-neutral-100); --light-theme-text: var(--col-black); --light-theme-text-secondary: var(--col-neutral-800); + --light-theme-code: var(--col-black); /* Dark theme */ --dark-theme-background: var(--col-azure-800); + --dark-theme-background-dim: var(--col-azure-900); --dark-theme-background-alt: var(--col-neutral-800); --dark-theme-text: var(--col-sepia-300); --dark-theme-text-secondary: var(--col-sepia-450); + --dark-theme-code: var(--col-orange-400); } From f8f9abcc779bdc14d8759e209039967d80d3b0f1 Mon Sep 17 00:00:00 2001 From: Filip Figiel Date: Wed, 14 Feb 2024 22:50:25 +0100 Subject: [PATCH 6/7] feat: recognize darker primary color --- styles/common.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/common.css b/styles/common.css index 21efb8f..b6f1d12 100644 --- a/styles/common.css +++ b/styles/common.css @@ -27,6 +27,7 @@ /* Semantic colors */ --brand-primary: var(--col-magenta-300); + --brand-primary-dim: var(--col-magenta-800); --brand-success: var(--col-green-200); --brand-warning: var(--col-yellow-300); --brand-error: var(--col-red-400); From be02f3299861cae02903545378d126fd9f8fd654 Mon Sep 17 00:00:00 2001 From: Filip Figiel Date: Thu, 22 Feb 2024 00:47:45 +0100 Subject: [PATCH 7/7] refactor: use fancier names for internal colors --- styles/common.css | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/styles/common.css b/styles/common.css index b6f1d12..116261b 100644 --- a/styles/common.css +++ b/styles/common.css @@ -2,10 +2,10 @@ :root { /* Greys */ --col-black: #000000; - --col-neutral-950: #151515; - --col-neutral-900: #1e1e1e; - --col-neutral-800: #2f2f2f; - --col-neutral-100: #f5f5f5; + --col-grey-950: #151515; + --col-grey-900: #1e1e1e; + --col-grey-800: #2f2f2f; + --col-grey-100: #f5f5f5; --col-azure-900: #202431; --col-azure-800: #292d3e; --col-azure-600: #51597b; @@ -17,33 +17,33 @@ --col-sepia-050: #fefefc; /* Colors */ - --col-magenta-800: #584355; - --col-magenta-300: #ffaff3; - --col-cyan-200: #a6f0fc; - --col-green-200: #c8ffa7; - --col-yellow-300: #ffd596; - --col-orange-400: #ff9d35; - --col-red-400: #ff6262; + --col-faff-pink-800: #584355; + --col-faff-pink-300: #ffaff3; + --col-boi-blue-200: #a6f0fc; + --col-menthol-200: #c8ffa7; + --col-caramel-300: #ffd596; + --col-deep-saffron-400: #ff9d35; + --col-tomato-400: #ff6262; /* Semantic colors */ - --brand-primary: var(--col-magenta-300); - --brand-primary-dim: var(--col-magenta-800); - --brand-success: var(--col-green-200); - --brand-warning: var(--col-yellow-300); - --brand-error: var(--col-red-400); + --brand-primary: var(--col-faff-pink-300); + --brand-primary-dim: var(--col-faff-pink-800); + --brand-success: var(--col-menthol-200); + --brand-warning: var(--col-caramel-300); + --brand-error: var(--col-tomato-400); /* Light theme */ --light-theme-background: var(--col-sepia-050); - --light-theme-background-dim: var(--col-neutral-100); + --light-theme-background-dim: var(--col-grey-100); --light-theme-text: var(--col-black); - --light-theme-text-secondary: var(--col-neutral-800); + --light-theme-text-secondary: var(--col-grey-800); --light-theme-code: var(--col-black); /* Dark theme */ --dark-theme-background: var(--col-azure-800); --dark-theme-background-dim: var(--col-azure-900); - --dark-theme-background-alt: var(--col-neutral-800); + --dark-theme-background-alt: var(--col-grey-800); --dark-theme-text: var(--col-sepia-300); --dark-theme-text-secondary: var(--col-sepia-450); - --dark-theme-code: var(--col-orange-400); + --dark-theme-code: var(--col-deep-saffron-400); }