Created
October 8, 2023 02:07
-
-
Save martin-mael/4b50fa8e55da846f3f73399d84fa1848 to your computer and use it in GitHub Desktop.
Flexoki Tailwind colors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Tailwind colors for Flexoki theme by Steph Ango. https://stephango.com/flexoki | |
| const colors = { | |
| base: { | |
| black: '#100F0F', | |
| 950: '#1C1B1A', | |
| 900: '#282726', | |
| 850: '#343331', | |
| 800: '#403E3C', | |
| 700: '#575653', | |
| 600: '#6F6E69', | |
| 500: '#878580', | |
| 300: '#B7B5AC', | |
| 200: '#CECDC3', | |
| 150: '#DAD8CE', | |
| 100: '#E6E4D9', | |
| 50: '#F2F0E5', | |
| paper: '#FFFCF0', | |
| }, | |
| red: { | |
| DEFAULT: '#AF3029', | |
| light: '#D14D41', | |
| }, | |
| orange: { | |
| DEFAULT: '#BC5215', | |
| light: '#DA702C', | |
| }, | |
| yellow: { | |
| DEFAULT: '#AD8301', | |
| light: '#D0A215', | |
| }, | |
| green: { | |
| DEFAULT: '#66800B', | |
| light: '#879A39', | |
| }, | |
| cyan: { | |
| DEFAULT: '#24837B', | |
| light: '#3AA99F', | |
| }, | |
| blue: { | |
| DEFAULT: '#205EA6', | |
| light: '#4385BE', | |
| }, | |
| purple: { | |
| DEFAULT: '#5E409D', | |
| light: '#8B7EC8', | |
| }, | |
| magenta: { | |
| DEFAULT: '#A02F6F', | |
| light: '#CE5D97', | |
| }, | |
| }; |
Hi there, thanks so much for Flexoki 2.0, I've been making my own but yours are way nicer...!
Here's my tailwind colors and CSS variables if anyone needs them:
(They're namespaced under flexoki, so to use them you'd write for example text-flexoki-red-500)
colors: {
flexoki: {
black: '#100F0F',
paper: '#FFFCF0',
'base': {
'50': '#F2F0E5',
'100': '#E6E4D9',
'150': '#DAD8CE',
'200': '#CECDC3',
'300': '#B7B5AC',
'400': '#9F9D96',
'500': '#878580',
'600': '#6F6E69',
'700': '#575653',
'800': '#403E3C',
'850': '#343331',
'900': '#282726',
'950': '#1C1B1A'
},
light: {
'bg': '#FFFCF0', // paper
'bg-2': '#F2F0E5', // base-50
'ui': '#E6E4D9', // base-100
'ui-2': '#DAD8CE', // base-150
'ui-3': '#CECDC3', // base-200
'tx': '#100F0F', // black
'tx-2': '#6F6E69', // base-600
'tx-3': '#B7B5AC', // base-300
're': '#AF3029', // red-600
'or': '#BC5215', // orange-600
'ye': '#AD8301', // yellow-600
'gr': '#66800B', // green-600
'cy': '#24837B', // cyan-600
'bl': '#205EA6', // blue-600
'pu': '#5E409D', // purple-600
'ma': '#A02F6F', // magenta-600
're-2': '#D14D41', // red-400
'or-2': '#DA702C', // orange-400
'ye-2': '#D0A215', // yellow-400
'gr-2': '#879A39', // green-400
'cy-2': '#3AA99F', // cyan-400
'bl-2': '#4385BE', // blue-400
'pu-2': '#8B7EC8', // purple-400
'ma-2': '#CE5D97', // magenta-400
},
dark: {
'bg': '#100F0F', // black
'bg-2': '#1C1B1A', // base-950
'ui': '#282726', // base-900
'ui-2': '#343331', // base-850
'ui-3': '#403E3C', // base-800
'tx-3': '#575653', // base-700
'tx-2': '#878580', // base-500
'tx': '#CECDC3', // base-200
're': '#D14D41', // red-400
'or': '#DA702C', // orange-400
'ye': '#D0A215', // yellow-400
'gr': '#879A39', // green-400
'cy': '#3AA99F', // cyan-400
'bl': '#4385BE', // blue-400
'pu': '#8B7EC8', // purple-400
'ma': '#CE5D97', // magenta-400
're-2': '#AF3029', // red-600
'or-2': '#BC5215', // orange-600
'ye-2': '#AD8301', // yellow-600
'gr-2': '#66800B', // green-600
'cy-2': '#24837B', // cyan-600
'bl-2': '#205EA6', // blue-600
'pu-2': '#5E409D', // purple-600
'ma-2': '#A02F6F', // magenta-600
},
semantic: {
// UI & Layout
'background-main': '#100F0F', // bg - main background
'background-alt': '#1C1B1A', // bg-2 - secondary background
'border-base': '#282726', // ui - borders
'border-hover': '#343331', // ui-2 - hovered borders
'border-active': '#403E3C', // ui-3 - active borders
// Typography
'text-faint': '#575653', // tx-3 - comments, faint text
'text-muted': '#878580', // tx-2 - punctuation, operators
'text-primary': '#CECDC3', // tx - primary text
// Status & Feedback
'text-error': '#D14D41', // re - errors, invalid code
'text-warning': '#DA702C', // or - functions, warnings
'text-success': '#879A39', // gr - keywords, success states
// Interactive Elements
'text-link': '#3AA99F', // cy - links, strings
// Syntax Highlighting
'syntax-constant': '#D0A215', // ye - constants
'syntax-variable': '#4385BE', // bl - variables, attributes
'syntax-number': '#8B7EC8', // pu - numbers
'syntax-keyword': '#CE5D97', // ma - language features
},
'red': {
'50': '#FFE1D5',
'100': '#FFCABB',
'150': '#FDB2A2',
'200': '#F89A8A',
'300': '#E8705F',
'400': '#D14D41',
'500': '#C03E35',
'600': '#AF3029',
'700': '#942822',
'800': '#6C201C',
'850': '#551B18',
'900': '#3E1715',
'950': '#261312'
},
'orange': {
'50': '#FFE1D5',
'100': '#FFCABB',
'150': '#FDB2A2',
'200': '#F89A8A',
'300': '#E8705F',
'400': '#D14D41',
'500': '#C03E35',
'600': '#AF3029',
'700': '#942822',
'800': '#6C201C',
'850': '#551B18',
'900': '#3E1715',
'950': '#261312'
},
'yellow': {
'50': '#FAEEC6',
'100': '#F6E2A0',
'150': '#F1D67E',
'200': '#ECCB60',
'300': '#DFB431',
'400': '#D0A215',
'500': '#BE9207',
'600': '#AD8301',
'700': '#8E6B01',
'800': '#664D01',
'850': '#503D02',
'900': '#3A2D04',
'950': '#241E08'
},
'green': {
'50': '#EDEECF',
'100': '#DDE2B2',
'150': '#CDD597',
'200': '#BEC97E',
'300': '#A0AF54',
'400': '#879A39',
'500': '#768D21',
'600': '#66800B',
'700': '#536907',
'800': '#3D4C07',
'850': '#313D07',
'900': '#252D09',
'950': '#1A1E0C'
},
'cyan': {
'50': '#DDF1E4',
'100': '#BFE8D9',
'150': '#A2DECE',
'200': '#87D3C3',
'300': '#5ABDAC',
'400': '#3AA99F',
'500': '#2F968D',
'600': '#24837B',
'700': '#1C6C66',
'800': '#164F4A',
'850': '#143F3C',
'900': '#122F2C',
'950': '#101F1D'
},
'blue': {
'50': '#E1ECEB',
'100': '#C6DDE8',
'150': '#ABCFE2',
'200': '#92BFDB',
'300': '#66A0C8',
'400': '#4385BE',
'500': '#3171B2',
'600': '#205EA6',
'700': '#1A4F8C',
'800': '#163B66',
'850': '#133051',
'900': '#12253B',
'950': '#101A24'
},
'purple': {
'50': '#F0EAEC',
'100': '#E2D9E9',
'150': '#D3CAE6',
'200': '#C4B9E0',
'300': '#A699D0',
'400': '#8B7EC8',
'500': '#735EB5',
'600': '#5E409D',
'700': '#4F3685',
'800': '#3C2A62',
'850': '#31234E',
'900': '#261C39',
'950': '#1A1623'
},
'magenta': {
'50': '#FEE4E5',
'100': '#FCCFDA',
'150': '#F9B9CF',
'200': '#F4A4C2',
'300': '#E47DA8',
'400': '#CE5D97',
'500': '#B74583',
'600': '#A02F6F',
'700': '#87285E',
'800': '#641F46',
'850': '#4F1B39',
'900': '#39172B',
'950': '#24131D'
},
},
}
And here's my CSS variables
// Flexoki Colors
--flexoki-black: #100F0F;
--flexoki-paper: #FFFCF0;
// UI & Layout
--flexoki-bg-main: #100F0F;
--flexoki-bg-alt: #1C1B1A;
--flexoki-border-base: #282726;
--flexoki-border-hover: #343331;
--flexoki-border-active: #403E3C;
// Typography
--flexoki-text-faint: #575653;
--flexoki-text-muted: #878580;
--flexoki-text-primary: #CECDC3;
// Status & Feedback
--flexoki-text-error: #D14D41;
--flexoki-text-warning: #DA702C;
--flexoki-text-success: #879A39;
// Interactive Elements
--flexoki-text-link: #3AA99F;
// Syntax Highlighting
--flexoki-syntax-constant: #D0A215;
--flexoki-syntax-variable: #4385BE;
--flexoki-syntax-number: #8B7EC8;
--flexoki-syntax-keyword: #CE5D97;
// Light Theme Colors
--flexoki-light-bg: #FFFCF0;
--flexoki-light-bg-2: #F2F0E5;
--flexoki-light-ui: #E6E4D9;
--flexoki-light-ui-2: #DAD8CE;
--flexoki-light-ui-3: #CECDC3;
--flexoki-light-tx: #100F0F;
--flexoki-light-tx-2: #6F6E69;
--flexoki-light-tx-3: #B7B5AC;
// Dark Theme Colors
--flexoki-dark-bg: #100F0F;
--flexoki-dark-bg-2: #1C1B1A;
--flexoki-dark-ui: #282726;
--flexoki-dark-ui-2: #343331;
--flexoki-dark-ui-3: #403E3C;
--flexoki-dark-tx: #CECDC3;
--flexoki-dark-tx-2: #878580;
--flexoki-dark-tx-3: #575653;
// Flexoki Color Palette
// Base
--flexoki-base-50: #F2F0E5;
--flexoki-base-100: #E6E4D9;
--flexoki-base-150: #DAD8CE;
--flexoki-base-200: #CECDC3;
--flexoki-base-300: #B7B5AC;
--flexoki-base-400: #9F9D96;
--flexoki-base-500: #878580;
--flexoki-base-600: #6F6E69;
--flexoki-base-700: #575653;
--flexoki-base-800: #403E3C;
--flexoki-base-850: #343331;
--flexoki-base-900: #282726;
--flexoki-base-950: #1C1B1A;
// Red
--flexoki-red-50: #FFE1D5;
--flexoki-red-100: #FFCABB;
--flexoki-red-150: #FDB2A2;
--flexoki-red-200: #F89A8A;
--flexoki-red-300: #E8705F;
--flexoki-red-400: #D14D41;
--flexoki-red-500: #C03E35;
--flexoki-red-600: #AF3029;
--flexoki-red-700: #942822;
--flexoki-red-800: #6C201C;
--flexoki-red-850: #551B18;
--flexoki-red-900: #3E1715;
--flexoki-red-950: #261312;
// Orange
--flexoki-orange-50: #FFE1D5;
--flexoki-orange-100: #FFCABB;
--flexoki-orange-150: #FDB2A2;
--flexoki-orange-200: #F89A8A;
--flexoki-orange-300: #E8705F;
--flexoki-orange-400: #D14D41;
--flexoki-orange-500: #C03E35;
--flexoki-orange-600: #AF3029;
--flexoki-orange-700: #942822;
--flexoki-orange-800: #6C201C;
--flexoki-orange-850: #551B18;
--flexoki-orange-900: #3E1715;
--flexoki-orange-950: #261312;
// Yellow
--flexoki-yellow-50: #FAEEC6;
--flexoki-yellow-100: #F6E2A0;
--flexoki-yellow-150: #F1D67E;
--flexoki-yellow-200: #ECCB60;
--flexoki-yellow-300: #DFB431;
--flexoki-yellow-400: #D0A215;
--flexoki-yellow-500: #BE9207;
--flexoki-yellow-600: #AD8301;
--flexoki-yellow-700: #8E6B01;
--flexoki-yellow-800: #664D01;
--flexoki-yellow-850: #503D02;
--flexoki-yellow-900: #3A2D04;
--flexoki-yellow-950: #241E08;
// Green
--flexoki-green-50: #EDEECF;
--flexoki-green-100: #DDE2B2;
--flexoki-green-150: #CDD597;
--flexoki-green-200: #BEC97E;
--flexoki-green-300: #A0AF54;
--flexoki-green-400: #879A39;
--flexoki-green-500: #768D21;
--flexoki-green-600: #66800B;
--flexoki-green-700: #536907;
--flexoki-green-800: #3D4C07;
--flexoki-green-850: #313D07;
--flexoki-green-900: #252D09;
--flexoki-green-950: #1A1E0C;
// Cyan
--flexoki-cyan-50: #DDF1E4;
--flexoki-cyan-100: #BFE8D9;
--flexoki-cyan-150: #A2DECE;
--flexoki-cyan-200: #87D3C3;
--flexoki-cyan-300: #5ABDAC;
--flexoki-cyan-400: #3AA99F;
--flexoki-cyan-500: #2F968D;
--flexoki-cyan-600: #24837B;
--flexoki-cyan-700: #1C6C66;
--flexoki-cyan-800: #164F4A;
--flexoki-cyan-850: #143F3C;
--flexoki-cyan-900: #122F2C;
--flexoki-cyan-950: #101F1D;
// Blue
--flexoki-blue-50: #E1ECEB;
--flexoki-blue-100: #C6DDE8;
--flexoki-blue-150: #ABCFE2;
--flexoki-blue-200: #92BFDB;
--flexoki-blue-300: #66A0C8;
--flexoki-blue-400: #4385BE;
--flexoki-blue-500: #3171B2;
--flexoki-blue-600: #205EA6;
--flexoki-blue-700: #1A4F8C;
--flexoki-blue-800: #163B66;
--flexoki-blue-850: #133051;
--flexoki-blue-900: #12253B;
--flexoki-blue-950: #101A24;
// Purple
--flexoki-purple-50: #F0EAEC;
--flexoki-purple-100: #E2D9E9;
--flexoki-purple-150: #D3CAE6;
--flexoki-purple-200: #C4B9E0;
--flexoki-purple-300: #A699D0;
--flexoki-purple-400: #8B7EC8;
--flexoki-purple-500: #735EB5;
--flexoki-purple-600: #5E409D;
--flexoki-purple-700: #4F3685;
--flexoki-purple-800: #3C2A62;
--flexoki-purple-850: #31234E;
--flexoki-purple-900: #261C39;
--flexoki-purple-950: #1A1623;
// Magenta
--flexoki-magenta-50: #FEE4E5;
--flexoki-magenta-100: #FCCFDA;
--flexoki-magenta-150: #F9B9CF;
--flexoki-magenta-200: #F4A4C2;
--flexoki-magenta-300: #E47DA8;
--flexoki-magenta-400: #CE5D97;
--flexoki-magenta-500: #B74583;
--flexoki-magenta-600: #A02F6F;
--flexoki-magenta-700: #87285E;
--flexoki-magenta-800: #641F46;
--flexoki-magenta-850: #4F1B39;
--flexoki-magenta-900: #39172B;
--flexoki-magenta-950: #24131D;
I think the most convenient for most Tailwind users would be to load the colors as replacements for the defaults. Namespacing is also useful as an alternative, but maybe it should be a separate config file?
Also we should move these config files into the main Flexoki repo so they're more easily accessible and editable by the community.
I agree with moving these to the main flexoki repo, and also agree it's better to not namespace them — it probably confuses more people than it helps, tbh. Thanks for the new colors, they look stunning!
FYI your orange sequence is using the red color values
oh shoot thank you, must have copied it wrong
…On Mon, Jan 27, 2025 at 3:43 PM Steph Ango ***@***.***> wrote:
***@***.**** commented on this gist.
------------------------------
FYI your orange sequence is using the red color values
—
Reply to this email directly, view it on GitHub
<https://gist.github.com/martin-mael/4b50fa8e55da846f3f73399d84fa1848#gistcomment-5411392>
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AA5QO2AJP675KJ7HC3TDCB32M3AA5BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTENJTGQ4DKOBZU52HE2LHM5SXFJTDOJSWC5DF>
.
You are receiving this email because you commented on the thread.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>
.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Would you like to add this to the main repo?
https://github.com/kepano/flexoki