yukit-web 0.0.1

package/src/lib/theme/tokens/color.css

@@ -0,0 +1,356 @@
+:root {
+  color-scheme: light;
+
+  /** || Gradients ||  */
+  --gradient-primary-button: linear-gradient(0deg, var(--accent-primary) 50%, var(--accent-primary-dark) 100%);
+  --gradient-primary-button-hover: linear-gradient(0deg, var(--accent-primary-dark) 50%, var(--accent-primary-darker) 100%);
+  --neutrals-element-high-gradient: linear-gradient(to bottom, var(--neutrals-element-high-gradient-start) 50%, var(--neutrals-element-high) 100%);
+  --neutrals-element-high-gradient-hover: linear-gradient(to bottom, var(--neutrals-element-high-gradient-start-hover) 50%, var(--neutrals-black) 100%);
+
+
+  /** || accent || */
+  --accent-primary-darker-ext: oklch(0.27 0.145 281.565);
+  /* #220C69 */
+  --accent-primary-darker-2: oklch(0.363 0.189 284.595);
+  /* #3C189A */
+  --accent-primary-darker: oklch(0.56 0.184 24.752);
+  /* #CA3739 */
+  --accent-primary-dark: oklch(63.79% 0.2094 24.6);
+  /* #F14346 */
+  --accent-primary: oklch(0.679 0.195 23.187);
+  /* #F95A5C */
+  --accent-primary-light: oklch(0.721 0.174 21.609);
+  /* #FF7173 */
+  --accent-primary-lighter: oklch(0.815 0.101 18.717);
+  /* #FDA8A9 */
+  --accent-primary-lighter-2: oklch(0.958 0.021 17.519);
+  /* #FFECEC */
+  --accent-primary-lighter-ext: oklch(0.978 0.011 17.34);
+  /* #FFF5F5 */
+
+  /** || neutrals || */
+  --neutrals-element-high: oklch(0.239 0 0);
+  /* #1F1F1F */
+  --neutrals-element-high-gradient-start: oklch(32.11% 0 89.9);
+  /* #1F1F1F */
+  --neutrals-element-high-gradient-start-hover: oklch(21.342% 0.00002 271.152);
+  /* #191919 */
+  --neutrals-element-mid: oklch(0.51 0 0);
+  /* #666666 */
+  --neutrals-element-low: oklch(0.65 0 0);
+  /* #8F8F8F */
+  --neutrals-element-disabled: oklch(0.783 0 0);
+  /* #B8B8B8 */
+  --neutrals-outline-accent: oklch(0.891 0 0);
+  /* #DBDBDB */
+  --neutrals-outline: oklch(0.94 0 0);
+  /* #EBEBEB */
+  --neutrals-overlay-accent: oklch(0.955 0 0);
+  /* #F0F0F0 */
+  --neutrals-overlay: oklch(0.97 0 0);
+  /* #F5F5F5 */
+  --neutrals-surface-accent: oklch(0.985 0 0);
+  /* #FAFAFA */
+  --neutrals-surface: oklch(1 0 0);
+  /* #FFFFFF */
+  --neutrals-background-accent: oklch(0.961 0 0);
+  /* #F2F2F2 */
+  --neutrals-background: oklch(0.985 0 0);
+  /* #FAFAFA */
+  --neutrals-black-opacity-high: oklch(0.239 0 0 / 0.8);
+  /* rgba(31,31,31,0.8) */
+  --neutrals-black-opacity-mid: oklch(0.239 0 0 / 0.4);
+  /* rgba(31,31,31,0.4) */
+  --neutrals-black-opacity-low: oklch(0.239 0 0 / 0.16);
+  /* rgba(31,31,31,0.16) */
+  --neutrals-white: oklch(1 0 0);
+  /* #FFFFFF */
+  --neutrals-black: oklch(0.239 0 0);
+  /* #1F1F1F */
+  --neutrals-white-opacity-high: oklch(1 0 0 / 0.8);
+  /* rgba(255,255,255,0.8) */
+  --neutrals-white-opacity-mid: oklch(1 0 0 / 0.4);
+  /* rgba(255,255,255,0.4) */
+  --neutrals-white-opacity-low: oklch(1 0 0 / 0.16);
+  /* rgba(255,255,255,0.16) */
+
+  /** || feedback || */
+  --feedback-success-darker-ext: oklch(0.262 0.049 172.552);
+  /* #022C22 */
+  --feedback-success-dark: oklch(0.571 0.129 159.74);
+  /* #028E5C */
+  --feedback-success: oklch(0.696 0.149 162.48);
+  /* #10B981 */
+  --feedback-success-light: oklch(0.773 0.153 163.223);
+  /* #34D399 */
+  --feedback-success-lighter-2: oklch(0.978 0.025 152.894);
+  /* #ECFDF0 */
+  --feedback-success-lighter-ext: oklch(0.978 0.025 152.894);
+  /* #ECFDF0 */
+  --feedback-error-darker-ext: oklch(0.259 0.091 24.823);
+  /* #46090B */
+  --feedback-error-dark: oklch(0.446 0.164 25.919);
+  /* #9B191D */
+  --feedback-error: oklch(0.528 0.201 26.757);
+  /* #C51B20 */
+  --feedback-error-light: oklch(0.711 0.170 20.711);
+  /* #FA6F73 */
+  --feedback-error-lighter-2: oklch(0.972 0.012 23.703);
+  /* #FEF3F2 */
+  --feedback-error-lighter-ext: oklch(0.972 0.012 23.703);
+  /* #FEF3F2 */
+  --feedback-warning-darker-ext: oklch(0.279 0.074 45.635);
+  /* #451A03 */
+  --feedback-warning-dark: oklch(0.666 0.157 58.318);
+  /* #D97706 */
+  --feedback-warning: oklch(0.769 0.165 70.08);
+  /* #F59E0B */
+  --feedback-warning-light: oklch(0.839 0.165 84.957);
+  /* #FBC024 */
+  --feedback-warning-lighter-2: oklch(0.987 0.021 95.277);
+  /* #FFFBEB */
+  --feedback-warning-lighter-ext: oklch(0.987 0.021 95.277);
+  /* #FFFBEB */
+  --feedback-info-darker-ext: oklch(0.282 0.087 267.935);
+  /* #172554 */
+  --feedback-info-dark: oklch(0.546 0.215 262.881);
+  /* #2563EB */
+  --feedback-info: oklch(0.623 0.188 259.815);
+  /* #3B82F6 */
+  --feedback-info-light: oklch(0.714 0.143 254.624);
+  /* #60A5FA */
+  --feedback-info-lighter-2: oklch(0.97 0.014 254.604);
+  /* #EFF6FF */
+  --feedback-info-lighter-ext: oklch(0.97 0.014 254.604);
+  /* #EFF6FF */
+  --feedback-additional-darker-ext: oklch(0.276 0.126 286.035);
+  /* #271461 */
+  --feedback-additional-dark: oklch(0.475 0.226 286.967);
+  /* #5D30D1 */
+  --feedback-additional: oklch(0.6 0.201 287.963);
+  /* #7F63EF */
+  --feedback-additional-light: oklch(0.812 0.092 289.02);
+  /* #BFB8FA */
+  --feedback-additional-lighter-2: oklch(0.971 0.013 290.754);
+  /* #F5F4FE */
+  --feedback-additional-lighter-ext: oklch(0.971 0.013 290.754);
+  /* #F5F4FE */
+
+  /** || communications || */
+  --comm-chat: oklch(0.659 0.17 287.387);
+  /* #8E7DF3 */
+  --comm-fault: oklch(0.732 0.167 51.879);
+  /* #F88532 */
+  --comm-notice: oklch(0.644 0.188 262.101);
+  /* #4A87FE */
+  --comm-list: oklch(0.846 0.148 80.685);
+  /* #FEC14A */
+
+  /** || Page and text ||  */
+  --background: var(--neutrals-background);
+  --foreground: var(--neutrals-element-high);
+
+  /** || Raised surfaces || */
+  --card: var(--neutrals-surface);
+  --card-foreground: var(--neutrals-element-high);
+  --popover: var(--neutrals-surface);
+  --popover-foreground: var(--neutrals-element-high);
+
+  /** || Brand || */
+  --primary: var(--accent-primary);
+  --primary-foreground: var(--neutrals-white);
+
+  /** || Neutral fills */
+  --secondary: var(--accent-primary-lighter);
+  --secondary-foreground: var(--neutrals-element-high);
+  --muted: var(--neutrals-overlay);
+  --muted-foreground: var(--neutrals-element-mid);
+  --accent: var(--neutrals-overlay-accent);
+  --accent-foreground: var(--neutrals-element-high);
+  --destructive: var(--feedback-error);
+  --destructive-foreground: var(--neutrals-white);
+
+  /** || Lines and focus || */
+  --border: var(--neutrals-outline);
+  --input: var(--neutrals-outline-accent);
+  --ring: var(--neutrals-element-low);
+
+  /** || Sidebar ||  */
+  --sidebar: var(--neutrals-surface);
+  --sidebar-foreground: var(--neutrals-element-high);
+  --sidebar-primary: var(--accent-primary);
+  --sidebar-primary-foreground: var(--neutrals-white);
+  --sidebar-accent: var(--neutrals-overlay-accent);
+  --sidebar-accent-foreground: var(--neutrals-element-high);
+  --sidebar-border: var(--neutrals-outline);
+  --sidebar-ring: var(--accent-primary);
+
+  --success: var(--feedback-success);
+  --success-foreground: var(--neutrals-white);
+  --warning: var(--feedback-warning);
+  --warning-foreground: var(--neutrals-white);
+  --info: var(--feedback-info);
+  --info-foreground: var(--neutrals-white);
+
+  --additional: var(--feedback-additional);
+  --additional-foreground: var(--neutrals-white);
+
+  --black: var(--neutrals-black);
+  --black-foreground: var(--neutrals-white);
+}
+
+.dark {
+  color-scheme: dark;
+  --neutrals-element-high-gradient-hover: linear-gradient(to bottom, var(--neutrals-element-high-gradient-start-hover) 50%, var(--neutrals-white) 100%);
+
+  /** || Accent || */
+  --accent-primary-darker-ext: oklch(0.27 0.145 281.565);
+  /* #220C69 */
+  --accent-primary-darker-2: oklch(0.363 0.189 284.595);
+  /* #3C189A */
+  --accent-primary-darker: oklch(0.668 0.209 24.258);
+  /* #FB4E50 */
+  --accent-primary-dark: oklch(0.668 0.209 24.258);
+  /* #FB4E50 */
+  --accent-primary: oklch(0.679 0.195 23.187);
+  /* #F95A5C */
+  --accent-primary-light: oklch(0.721 0.174 21.609);
+  /* #FF7173 */
+  --accent-primary-lighter: oklch(0.815 0.101 18.717);
+  /* #FDA8A9 */
+  --accent-primary-lighter-2: oklch(0.679 0.195 23.187 / 0.4);
+  /* rgba(249,90,92,0.4) */
+  --accent-primary-lighter-ext: oklch(0.679 0.195 23.187 / 0.16);
+  /* rgba(249,90,92,0.16) */
+
+  /** || neutrals || */
+  --neutrals-element-high: oklch(96% 0 0);
+  --neutrals-element-high-gradient-start: oklch(91.8% 0 89.9);
+  /* #1F1F1F */
+  --neutrals-element-high-gradient-start-hover: oklch(85.3% 0 89.9);
+  /* #FFFFFF */
+  --neutrals-element-mid: oklch(0.845 0 0);
+  /* #CCCCCC */
+  --neutrals-element-low: oklch(0.748 0 0);
+  /* #ADADAD */
+  --neutrals-element-disabled: oklch(0.58 0 0);
+  /* #7A7A7A */
+  --neutrals-outline-accent: oklch(0.475 0 0);
+  /* #5C5C5C */
+  --neutrals-outline: oklch(0.36 0 0);
+  /* #3D3D3D */
+  --neutrals-overlay-accent: oklch(0.42 0 0);
+  /* #4D4D4D */
+  --neutrals-overlay: oklch(0.301 0 0);
+  /* #2E2E2E */
+  --neutrals-surface-accent: oklch(0.239 0 0);
+  /* #1F1F1F */
+  --neutrals-surface: oklch(0.191 0 0);
+  /* #141414 */
+  --neutrals-background-accent: oklch(0.191 0 0);
+  /* #141414 */
+  --neutrals-background: oklch(0.115 0 0);
+  /* #050505 */
+  --neutrals-black-opacity-high: oklch(0.239 0 0 / 0.8);
+  /* rgba(31,31,31,0.8) */
+  --neutrals-black-opacity-mid: oklch(0.239 0 0 / 0.4);
+  /* rgba(31,31,31,0.4) */
+  --neutrals-black-opacity-low: oklch(0.239 0 0 / 0.16);
+  /* rgba(31,31,31,0.16) */
+  --neutrals-white: oklch(1 0 0);
+  /* #FFFFFF */
+  --neutrals-black: oklch(0.239 0 0);
+  /* #1F1F1F */
+  --neutrals-white-opacity-high: oklch(1 0 0 / 0.8);
+  /* rgba(255,255,255,0.8) */
+  --neutrals-white-opacity-mid: oklch(1 0 0 / 0.4);
+  /* rgba(255,255,255,0.4) */
+  --neutrals-white-opacity-low: oklch(1 0 0 / 0.16);
+  /* rgba(255,255,255,0.16) */
+
+  /** || feedback || */
+  --feedback-success-darker-ext: oklch(0.262 0.049 172.552);
+  /* #022C22 */
+  --feedback-success-dark: oklch(0.596 0.127 163.225);
+  /* #059669 */
+  --feedback-success: oklch(0.696 0.149 162.48);
+  /* #10B981 */
+  --feedback-success-light: oklch(0.773 0.153 163.223);
+  /* #34D399 */
+  --feedback-success-lighter-2: oklch(0.696 0.149 162.48 / 0.32);
+  /* rgba(16,185,129,0.32) */
+  --feedback-success-lighter-ext: oklch(0.696 0.149 162.48 / 0.16);
+  /* rgba(16,185,129,0.16) */
+  --feedback-error-darker-ext: oklch(0.259 0.091 24.823);
+  /* #46090B */
+  --feedback-error-dark: oklch(0.446 0.164 25.919);
+  /* #9B191D */
+  --feedback-error: oklch(0.528 0.201 26.757);
+  /* #C51B20 */
+  --feedback-error-light: oklch(0.711 0.170 20.711);
+  /* #FA6F73 */
+  --feedback-error-lighter-2: oklch(0.528 0.201 26.757 / 0.32);
+  /* rgba(197,27,32,0.32) */
+  --feedback-error-lighter-ext: oklch(0.528 0.201 26.757 / 0.16);
+  /* rgba(197,27,32,0.16) */
+  --feedback-warning-darker-ext: oklch(0.279 0.074 45.635);
+  /* #451A03 */
+  --feedback-warning-dark: oklch(0.666 0.157 58.318);
+  /* #D97706 */
+  --feedback-warning: oklch(0.769 0.165 70.08);
+  /* #F59E0B */
+  --feedback-warning-light: oklch(0.839 0.165 84.957);
+  /* #FBC024 */
+  --feedback-warning-lighter-2: oklch(0.769 0.165 70.08 / 0.32);
+  /* rgba(245,158,11,0.32) */
+  --feedback-warning-lighter-ext: oklch(0.769 0.165 70.08 / 0.16);
+  /* rgba(245,158,11,0.16) */
+  --feedback-info-darker-ext: oklch(0.282 0.087 267.935);
+  /* #172554 */
+  --feedback-info-dark: oklch(0.546 0.215 262.881);
+  /* #2563EB */
+  --feedback-info: oklch(0.623 0.188 259.815);
+  /* #3B82F6 */
+  --feedback-info-light: oklch(0.714 0.143 254.624);
+  /* #60A5FA */
+  --feedback-info-lighter-2: oklch(0.623 0.188 259.815 / 0.32);
+  /* rgba(59,130,246,0.32) */
+  --feedback-info-lighter-ext: oklch(0.623 0.188 259.815 / 0.16);
+  /* rgba(59,130,246,0.16) */
+  --feedback-additional-darker-ext: oklch(0.276 0.126 286.035);
+  /* #271461 */
+  --feedback-additional-dark: oklch(0.475 0.226 286.967);
+  /* #5D30D1 */
+  --feedback-additional: oklch(0.6 0.201 287.963);
+  /* #7F63EF */
+  --feedback-additional-light: oklch(0.812 0.092 289.02);
+  /* #BFB8FA */
+  --feedback-additional-lighter-2: oklch(0.971 0.013 290.754 / 0.32);
+  /* rgba(245,244,254,0.32) */
+  --feedback-additional-lighter-ext: oklch(0.971 0.013 290.754 / 0.16);
+  /* rgba(245,244,254,0.16) */
+
+  /** || communications || */
+  --comm-chat: oklch(0.659 0.17 287.387);
+  /* #8E7DF3 */
+  --comm-fault: oklch(0.732 0.167 51.879);
+  /* #F88532 */
+  --comm-notice: oklch(0.644 0.188 262.101);
+  /* #4A87FE */
+  --comm-list: oklch(0.846 0.148 80.685);
+  /* #FEC14A */
+}
+
+@theme inline {
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-additional: var(--additional);
+  --color-additional-foreground: var(--additional-foreground);
+  --color-ink: var(--black);
+  --color-ink-foreground: var(--black-foreground);
+}

package/src/lib/theme/tokens/component-colors.css

@@ -0,0 +1,167 @@
+[data-yuw-color='primary'] {
+  --yuw-accent: var(--accent-primary);
+  --yuw-accent-foreground: var(--neutrals-white);
+  --secondary: var(--accent-primary-lighter);
+  --secondary-foreground: var(--neutrals-element-high);
+}
+
+[data-yuw-color='primary'] button.bg-primary:not(:disabled) {
+  background: var(--gradient-primary-button);
+  border: none;
+}
+
+[data-yuw-color='primary'] button.bg-primary:not(:disabled):hover {
+  background: var(--gradient-primary-button-hover);
+}
+
+[data-yuw-color='secondary'] {
+  --yuw-accent: var(--neutrals-element-high);
+  --yuw-accent-foreground: var(--background);
+  --secondary: var(--neutrals-element-low);
+  --secondary-foreground: var(--neutrals-overlay-accent);
+  --border: var(--neutrals-outline-accent);
+}
+
+[data-yuw-color='secondary'] button.bg-primary:not(:disabled) {
+  background: var(--neutrals-element-high-gradient);
+  border: none;
+}
+
+[data-yuw-color='secondary'] button.bg-primary:not(:disabled):hover {
+  background: var(--neutrals-element-high-gradient-hover);
+}
+
+[data-yuw-color='destructive'] {
+  --yuw-accent: var(--feedback-error);
+  --yuw-accent-foreground: var(--neutrals-white);
+  --secondary: var(--feedback-error-light);
+  --secondary-foreground: var(--neutrals-surface);
+}
+
+[data-yuw-color='destructive'] button.bg-primary:not(:disabled):hover {
+  background: var(--feedback-error-dark);
+}
+
+[data-yuw-color='success'] {
+  --yuw-accent: var(--feedback-success);
+  --yuw-accent-foreground: var(--neutrals-white);
+  --secondary: var(--feedback-success-light);
+  --secondary-foreground: var(--neutrals-surface);
+}
+
+[data-yuw-color='success'] button.bg-primary:not(:disabled):hover {
+  background: var(--feedback-success-dark);
+}
+
+[data-yuw-color='warning'] {
+  --yuw-accent: var(--feedback-warning);
+  --yuw-accent-foreground: var(--neutrals-white);
+  --secondary: var(--feedback-warning-light);
+  --secondary-foreground: var(--neutrals-surface);
+}
+
+[data-yuw-color='warning'] button.bg-primary:not(:disabled):hover {
+  background: var(--feedback-warning-dark);
+}
+
+[data-yuw-color='info'] {
+  --yuw-accent: var(--feedback-info);
+  --yuw-accent-foreground: var(--neutrals-white);
+  --secondary: var(--feedback-info-light);
+  --secondary-foreground: var(--neutrals-surface);
+}
+
+[data-yuw-color='info'] button.bg-primary:not(:disabled):hover {
+  background: var(--feedback-info-dark);
+}
+
+[data-yuw-color='violet'] {
+  --yuw-accent: var(--feedback-additional);
+  --yuw-accent-foreground: var(--neutrals-white);
+  --secondary: var(--feedback-additional-light);
+  --secondary-foreground: var(--neutrals-surface);
+}
+
+[data-yuw-color='violet'] button.bg-primary:not(:disabled):hover {
+  background: var(--feedback-additional-dark);
+}
+
+[data-yuw-color='muted'] {
+  --yuw-accent: var(--neutrals-element-mid);
+  --yuw-accent-foreground: var(--neutrals-white);
+  --secondary: var(--neutrals-overlay);
+  --secondary-foreground: var(--neutrals-element-mid);
+}
+
+[data-yuw-color='muted'] button.bg-primary:not(:disabled):hover {
+  background: color-mix(in oklab, var(--neutrals-element-mid) 70%, var(--neutrals-element-high));
+}
+
+[data-yuw-color] {
+  --primary: var(--yuw-accent);
+  --primary-foreground: var(--yuw-accent-foreground);
+  --destructive: var(--yuw-accent);
+  --border: var(--yuw-accent);
+  --foreground: var(--yuw-accent);
+  --muted: color-mix(in oklab, var(--yuw-accent) 15%, transparent);
+  --input: var(--yuw-accent);
+}
+
+[data-yuw-color] button:not(:disabled) {
+  --ring: var(--yuw-accent);
+}
+
+.dark [data-yuw-color='primary'] {
+  --yuw-accent: var(--accent-primary-dark);
+  --secondary: var(--accent-primary-lighter-2);
+  --secondary-foreground: var(--neutrals-white);
+}
+
+.dark [data-yuw-color='secondary'] {
+  --secondary: var(--neutrals-element-low);
+  --secondary-foreground: var(--neutrals-overlay-accent);
+  --input: color-mix(in oklab, var(--yuw-accent) 40%, transparent);
+}
+
+.dark [data-yuw-color='destructive'] {
+  --yuw-accent: var(--feedback-error-dark);
+  --secondary: var(--feedback-error-lighter-2);
+  --secondary-foreground: var(--neutrals-white);
+}
+
+.dark [data-yuw-color='success'] {
+  --yuw-accent: var(--feedback-success-dark);
+  --secondary: var(--feedback-success-lighter-2);
+  --secondary-foreground: var(--neutrals-white);
+}
+
+.dark [data-yuw-color='warning'] {
+  --yuw-accent: var(--feedback-warning-dark);
+  --secondary: var(--feedback-warning-lighter-2);
+  --secondary-foreground: var(--neutrals-white);
+}
+
+.dark [data-yuw-color='info'] {
+  --yuw-accent: var(--feedback-info-dark);
+  --secondary: var(--feedback-info-lighter-2);
+  --secondary-foreground: var(--neutrals-white);
+}
+
+.dark [data-yuw-color='violet'] {
+  --yuw-accent-foreground: var(--neutrals-white);
+  --secondary: var(--feedback-additional-dark);
+  --secondary-foreground: var(--neutrals-white);
+}
+
+html body yuw-button[data-yuw-color] button:disabled {
+  --yuw-accent: var(--neutrals-element-disabled);
+  --yuw-accent-foreground: var(--neutrals-white);
+  --primary: var(--yuw-accent);
+  --primary-foreground: var(--yuw-accent-foreground);
+  --secondary: var(--neutrals-outline-accent);
+  --secondary-foreground: var(--yuw-accent-foreground);
+  --destructive: var(--yuw-accent);
+  --border: var(--yuw-accent);
+  --foreground: var(--yuw-accent);
+  --muted: color-mix(in oklab, var(--yuw-accent) 15%, transparent);
+}

package/src/lib/theme/tokens/radius.css

@@ -0,0 +1,18 @@
+:root {
+  --radius: 0.5rem;
+
+  /* Component scale */
+  --radius-component-none: 0rem; /* 0px */
+  --radius-component-xs: 0.25rem; /* 4px */
+  --radius-component-sm: 0.375rem; /* 6px */
+  --radius-component-md: 0.5rem; /* 8px */
+  --radius-component-lg: 0.75rem; /* 12px */
+  --radius-component-xl: 1rem; /* 16px */
+  --radius-component-rounded: 999px; /* effectively pill-shaped at any element size, kept in px on purpose */
+
+  /* Container scale */
+  --radius-container-sm: 0.75rem; /* 12px */
+  --radius-container-md: 1.125rem; /* 18px */
+  --radius-container-lg: 1.5rem; /* 24px */
+  --radius-container-xl: 2rem; /* 32px */
+}