💥 Use css variables instead of scss

captive-theme/app/assets/stylesheets/captive-theme/variables/_base.scss

@@ -0,0 +1,5 @@
+@import './colors';
+@import './design_system_colors';
+@import './fonts';
+@import './screens';
+@import './spaces';

captive-theme/app/assets/stylesheets/captive-theme/variables/_border_radius.scss

@@ -0,0 +1,11 @@
+:root {
+  --rounded-none: 0px;
+  --rounded-sm: 0.125rem; /* 2px */
+  --rounded: 0.25rem; /* 4px */
+  --rounded-md: 0.375rem; /* 6px */
+  --rounded-lg: 0.5rem; /* 8px */
+  --rounded-xl: 0.75rem; /* 12px */
+  --rounded-2xl: 1rem; /* 16px */
+  --rounded-3xl: 1.5rem; /* 24px */
+  --rounded-full: 9999px;
+}

captive-theme/app/assets/stylesheets/captive-theme/variables/_colors.scss

@@ -0,0 +1,88 @@
+:root {
+  // white
+  --white: #fff;
+
+  // blue-grey
+  --blue-grey-050: #f5f7fa;
+  --blue-grey-100: #d9e2ec;
+  --blue-grey-200: #bcccdc;
+  --blue-grey-300: #9fb3c8;
+  --blue-grey-400: #829ab1;
+  --blue-grey-500: #5e7997;
+  --blue-grey-600: #486581;
+  --blue-grey-700: #334e68;
+  --blue-grey-800: #243b53;
+  --blue-grey-900: #102a43;
+
+  // pink-vivid
+  --pink-vivid-050: #fff5f8;
+  --pink-vivid-100: #ffb8d2;
+  --pink-vivid-200: #ff8cba;
+  --pink-vivid-300: #f364a2;
+  --pink-vivid-400: #e8368f;
+  --pink-vivid-500: #d9127c;
+  --pink-vivid-600: #bc0a6f;
+  --pink-vivid-700: #a30664;
+  --pink-vivid-800: #870557;
+  --pink-vivid-900: #620042;
+
+  // light-blue-vivid
+  --light-blue-vivid-050: #f0fbff;
+  --light-blue-vivid-100: #b3ecff;
+  --light-blue-vivid-200: #81defd;
+  --light-blue-vivid-300: #5ed0fa;
+  --light-blue-vivid-400: #40c3f7;
+  --light-blue-vivid-500: #2bb0ed;
+  --light-blue-vivid-600: #188dcd;
+  --light-blue-vivid-700: #1177b6;
+  --light-blue-vivid-800: #0a6299;
+  --light-blue-vivid-900: #035388;
+
+  // lime-green
+  --lime-green-050: #f2fde0;
+  --lime-green-100: #e2f7c2;
+  --lime-green-200: #c7ea8f;
+  --lime-green-300: #abdb5e;
+  --lime-green-400: #94c843;
+  --lime-green-500: #7bb026;
+  --lime-green-600: #63921a;
+  --lime-green-700: #507712;
+  --lime-green-800: #42600c;
+  --lime-green-900: #2b4005;
+
+  // yellow-vivid
+  --yellow-vivid-050: #fffbea;
+  --yellow-vivid-100: #fff3c4;
+  --yellow-vivid-200: #fce588;
+  --yellow-vivid-300: #fadb5f;
+  --yellow-vivid-400: #f7c948;
+  --yellow-vivid-500: #f0b429;
+  --yellow-vivid-600: #de911d;
+  --yellow-vivid-700: #cb6e17;
+  --yellow-vivid-800: #b44d12;
+  --yellow-vivid-900: #8d2b0b;
+
+  // red-vivid
+  --red-vivid-050: #fff0f0;
+  --red-vivid-100: #ffbdbd;
+  --red-vivid-200: #ff9b9b;
+  --red-vivid-300: #f86a6a;
+  --red-vivid-400: #ef4e4e;
+  --red-vivid-500: #e12d39;
+  --red-vivid-600: #cf1124;
+  --red-vivid-700: #ab091e;
+  --red-vivid-800: #8a041a;
+  --red-vivid-900: #610316;
+
+  // purple
+  --purple-050: #eae2f8;
+  --purple-100: #cfbcf2;
+  --purple-200: #a081d9;
+  --purple-300: #8662c7;
+  --purple-400: #724bb7;
+  --purple-500: #653cad;
+  --purple-600: #51279b;
+  --purple-700: #421987;
+  --purple-800: #34126f;
+  --purple-900: #240754;
+}

captive-theme/app/assets/stylesheets/captive-theme/variables/_design_system_colors.scss

@@ -0,0 +1,48 @@
+:root {
+  // foreground
+  --fg-default: var(--blue-grey-900);
+  --fg-muted: var(--blue-grey-600);
+  --fg-subtle: var(--blue-grey-500);
+  --fg-on-emphasis: var(--white);
+
+  // background
+  --bg-default: var(--white);
+  --bg-subtle: var(--blue-grey-050);
+  --bg-emphasis: var(--blue-grey-900);
+
+  // primary
+  --primary-fg: var(--pink-vivid-500);
+  --primary-emphasis: var(--pink-vivid-500);
+  --primary-muted: var(--pink-vivid-400);
+  --primary-subtle: var(--pink-vivid-050);
+
+  // accent
+  --accent-fg: var(--light-blue-vivid-700);
+  --accent-emphasis: var(--light-blue-vivid-700);
+  --accent-muted: var(--light-blue-vivid-600);
+  --accent-subtle: var(--light-blue-vivid-050);
+
+  // success
+  --success-fg: var(--lime-green-700);
+  --success-emphasis: var(--lime-green-700);
+  --success-muted: var(--lime-green-600);
+  --success-subtle: var(--lime-green-050);
+
+  // attention
+  --attention-fg: var(--yellow-vivid-800);
+  --attention-emphasis: var(--yellow-vivid-800);
+  --attention-muted: var(--yellow-vivid-700);
+  --attention-subtle: var(--yellow-vivid-050);
+
+  // danger
+  --danger-fg: var(--red-vivid-600);
+  --danger-emphasis: var(--red-vivid-600);
+  --danger-muted: var(--red-vivid-500);
+  --danger-subtle: var(--red-vivid-050);
+
+  // support
+  --support-fg: var(--purple-700);
+  --support-emphasis: var(--purple-700);
+  --support-muted: var(--purple-500);
+  --support-subtle: var(--purple-050);
+}

captive-theme/app/assets/stylesheets/captive-theme/variables/_fonts.scss

@@ -0,0 +1,40 @@
+// https://www.notion.so/captive/Typographie-Captive-85c60f5a849f4adaacaf18cc4aff2cea
+/* stylelint-disable-next-line import-notation */
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Barlow:wght@400;600&display=swap');
+
+:root {
+  // font-family
+  --font-family-fallback: -apple-system, 'Segoe UI', roboto, 'noto sans', ubuntu, cantarell, 'helvetica neue';
+  --font-family-text: 'Open Sans', var(--font-family-fallback);
+  --font-family-title: 'Barlow', var(--font-family-fallback);
+
+  // font-size
+  --font-xs: 0.75rem; /* 12px */
+  --font-sm: 0.875rem; /* 14px */
+  --font-md: 1rem; /* 16px */
+  --font-lg: 1.125rem; /* 18px */
+  --font-xl: 1.25rem; /* 20px */
+  --font-2xl: 1.5rem; /* 24px */
+  --font-3xl: 1.875rem; /* 30px */
+  --font-4xl: 2.25rem; /* 36px */
+  --font-5xl: 3rem; /* 48px */
+  --font-6xl: 3.75rem; /* 60px */
+  --font-7xl: 4.5rem; /* 72px */
+  --font-8xl: 6rem; /* 96px */
+  --font-9xl: 8rem; /* 128px */
+
+  // line-height
+  --font-xs-leading: 1rem; /* 16px */
+  --font-sm-leading: 1.25rem; /* 20px */
+  --font-md-leading: 1.5rem; /* 24px */
+  --font-lg-leading: 1.75rem; /* 28px */
+  --font-xl-leading: 1.75rem; /* 28px */
+  --font-2xl-leading: 2rem; /* 32px */
+  --font-3xl-leading: 2.25rem; /* 36px */
+  --font-4xl-leading: 2.5rem; /* 40px */
+  --font-5xl-leading: 1;
+  --font-6xl-leading: 1;
+  --font-7xl-leading: 1;
+  --font-8xl-leading: 1;
+  --font-9xl-leading: 1;
+}

captive-theme/app/assets/stylesheets/captive-theme/variables/_screens.scss

@@ -0,0 +1,7 @@
+:root {
+  --screen-sm: 640px;
+  --screen-md: 768px;
+  --screen-lg: 1024px;
+  --screen-xl: 1280px;
+  --screen-2xl: 1536px;
+}

captive-theme/app/assets/stylesheets/captive-theme/variables/_shadows.scss

@@ -0,0 +1,10 @@
+:root {
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --shadow-none: 0 0 #0000;
+}

captive-theme/app/assets/stylesheets/captive-theme/variables/_spaces.scss

@@ -0,0 +1,33 @@
+:root {
+  --space-0: 0;
+  --space-0-1: 0.125rem; /* 2px */
+  --space-1: 0.25rem; /* 4px */
+  --space-2: 0.5rem; /* 8px */
+  --space-3: 0.75rem; /* 12px */
+  --space-4: 1rem; /* 16px */
+  --space-5: 1.25rem; /* 20px */
+  --space-6: 1.5rem; /* 24px */
+  --space-7: 1.75rem; /* 28px */
+  --space-8: 2rem; /* 32px */
+  --space-9: 2.25rem; /* 36px */
+  --space-10: 2.5rem; /* 40px */
+  --space-11: 2.75rem; /* 44px */
+  --space-12: 3rem; /* 48px */
+  --space-14: 3.5rem; /* 56px */
+  --space-16: 4rem; /* 64px */
+  --space-20: 5rem; /* 80px */
+  --space-24: 6rem; /* 96px */
+  --space-28: 7rem; /* 112px */
+  --space-32: 8rem; /* 128px */
+  --space-36: 9rem; /* 144px */
+  --space-40: 10rem; /* 160px */
+  --space-44: 11rem; /* 176px */
+  --space-48: 12rem; /* 192px */
+  --space-52: 13rem; /* 208px */
+  --space-56: 14rem; /* 224px */
+  --space-60: 15rem; /* 240px */
+  --space-64: 16rem; /* 256px */
+  --space-72: 18rem; /* 288px */
+  --space-80: 20rem; /* 320px */
+  --space-96: 24rem; /* 384px */
+}