Packages

noora

0.2.0
0.84.1 0.84.0 0.83.2 0.83.1 0.83.0 0.82.7 0.82.6 0.82.5 0.82.4 0.82.3 0.82.2 0.82.1 0.82.0 0.81.4 0.81.3 0.81.2 0.81.1 0.81.0 0.80.1 0.80.0 0.79.1 0.79.0 0.78.1 0.78.0 0.77.4 0.77.3 0.77.2 0.77.1 0.77.0 0.76.0 0.75.0 0.74.0 0.73.0 0.72.0 0.71.0 0.70.0 0.69.1 0.69.0 0.68.0 0.67.0 0.66.0 0.65.0 0.64.2 0.64.1 0.64.0 0.63.2 0.63.1 0.63.0 0.62.0 0.61.0 0.60.0 0.59.0 0.58.0 0.57.0 0.56.1 0.56.0 0.55.0 0.54.0 0.53.1 0.53.0 0.52.1 0.52.0 0.51.0 0.50.1 0.50.0 0.49.0 0.48.0 0.47.0 0.46.0 0.45.0 0.44.3 0.44.2 0.44.1 0.44.0 0.43.0 0.42.0 0.41.0 0.40.6 0.40.5 0.40.4 0.40.3 0.40.2 0.40.1 0.40.0 0.39.1 0.39.0 0.38.0 0.37.0 0.36.0 0.35.0 0.34.0 0.33.0 0.32.1 0.32.0 0.31.0 0.30.0 0.29.2 0.29.1 0.29.0 0.28.5 0.28.4 0.28.3 0.28.2 0.28.1 0.28.0 0.27.0 0.26.1 0.26.0 0.25.0 0.24.0 0.23.1 0.23.0 0.22.1 0.22.0 0.21.0 0.20.0 0.19.0 0.18.0 0.17.0 0.16.0 0.15.0 0.14.0 0.13.0 0.12.1 0.12.0 0.11.2 0.11.1 0.11.0 0.10.0 0.9.0 0.8.0 0.7.0 0.6.1 0.6.0 0.5.1 0.5.0 0.4.0 0.3.2 0.3.1 0.3.0 0.2.2 0.2.0 0.1.0 0.1.0-rc.2 0.1.0-rc.1 0.1.0-alpha.6 0.1.0-alpha.5 0.1.0-alpha.4 0.1.0-alpha.3 0.1.0-alpha.2 0.1.0-alpha.1

A component library for Phoenix LiveView applications

HexDocs

Current section

Files

Jump to
Readme
151 Versions
7 Dependencies
Dependants
Files
Activity
noora css tokens.css
Raw

css/tokens.css 

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Geist+Mono:wght@400;700&display=swap");



@import "https://rsms.me/inter/inter.css";



:root {

  color-scheme: light dark;



  /* Color palette */

  --noora-purple-50: oklch(97% 0.015 286.1);

  --noora-purple-100: oklch(88.3% 0.06 287.2);

  --noora-purple-200: oklch(79.4% 0.11 287.1);

  --noora-purple-300: oklch(70.7% 0.161 286.8);

  --noora-purple-400: oklch(62% 0.217 287);

  --noora-purple-500: oklch(53.2% 0.276 286.9);

  --noora-purple-600: oklch(46.9% 0.27 286.9);

  --noora-purple-700: oklch(38.1% 0.22 286.8);

  --noora-purple-800: oklch(29.1% 0.168 286.8);

  --noora-purple-900: oklch(21% 0.121 287);



  --noora-pink-50: oklch(97% 0.015 7.5);

  --noora-pink-100: oklch(89% 0.06 6.7);

  --noora-pink-200: oklch(81.2% 0.11 7.8);

  --noora-pink-300: oklch(73.2% 0.171 7.9);

  --noora-pink-400: oklch(65.3% 0.215 7.9);

  --noora-pink-500: oklch(57.4% 0.218 7.8);

  --noora-pink-600: oklch(50.2% 0.201 7.8);

  --noora-pink-700: oklch(40.4% 0.162 7.8);

  --noora-pink-800: oklch(30.2% 0.121 8.4);

  --noora-pink-900: oklch(21.1% 0.084 7.9);



  --noora-red-50: oklch(95% 0.02 32.5);

  --noora-red-100: oklch(89.4% 0.056 30.5);

  --noora-red-200: oklch(81.7% 0.104 31.1);

  --noora-red-300: oklch(74% 0.159 30.9);

  --noora-red-400: oklch(66.3% 0.224 30.7);

  --noora-red-500: oklch(58.7% 0.23 30.7);

  --noora-red-600: oklch(51.2% 0.201 30.7);

  --noora-red-700: oklch(41% 0.161 30.8);

  --noora-red-800: oklch(30.4% 0.12 30.6);

  --noora-red-900: oklch(21% 0.082 31);



  --noora-orange-50: oklch(97% 0.016 46.6);

  --noora-orange-100: oklch(91.9% 0.045 47.5);

  --noora-orange-200: oklch(87% 0.077 49.1);

  --noora-orange-300: oklch(81.9% 0.111 48.6);

  --noora-orange-400: oklch(76.9% 0.149 48.6);

  --noora-orange-500: oklch(71.9% 0.185 48.7);

  --noora-orange-600: oklch(0.62 0.1659 48.81);

  --noora-orange-700: oklch(48% 0.129 49);

  --noora-orange-800: oklch(33.7% 0.091 48.5);

  --noora-orange-900: oklch(20.9% 0.057 48.2);



  --noora-yellow-50: oklch(97% 0.032 85.5);

  --noora-yellow-100: oklch(94.6% 0.059 86);

  --noora-yellow-200: oklch(92.2% 0.088 86.6);

  --noora-yellow-300: oklch(89.7% 0.116 86.2);

  --noora-yellow-400: oklch(87.3% 0.144 86.2);

  --noora-yellow-500: oklch(84.8% 0.174 86.1);

  --noora-yellow-600: oklch(71.9% 0.147 86);

  --noora-yellow-700: oklch(54.8% 0.112 85.9);

  --noora-yellow-800: oklch(36.9% 0.075 86.3);

  --noora-yellow-900: oklch(20.8% 0.043 84.8);



  --noora-green-50: oklch(97% 0.05 147);

  --noora-green-100: oklch(90.5% 0.115 146.9);

  --noora-green-200: oklch(83.8% 0.171 146.8);

  --noora-green-300: oklch(77.2% 0.171 146.7);

  --noora-green-400: oklch(70.7% 0.171 146.8);

  --noora-green-500: oklch(64% 0.175 146.7);

  --noora-green-600: oklch(53.7% 0.1613 146.6);

  --noora-green-700: oklch(43.8% 0.131 146.8);

  --noora-green-800: oklch(31.7% 0.095 146.6);

  --noora-green-900: oklch(20.8% 0.062 146.7);



  --noora-azure-50: oklch(97% 0.016 238.1);

  --noora-azure-100: oklch(88.9% 0.061 238.8);

  --noora-azure-200: oklch(81% 0.108 238.6);

  --noora-azure-300: oklch(73% 0.153 238.5);

  --noora-azure-400: oklch(65.1% 0.123 238);

  --noora-azure-500: oklch(57% 0.127 238.5);

  --noora-azure-600: oklch(49.8% 0.111 238.3);

  --noora-azure-700: oklch(40.3% 0.09 238.4);

  --noora-azure-800: oklch(30.1% 0.066 237.6);

  --noora-azure-900: oklch(21.1% 0.046 237.6);



  --noora-blue-50: oklch(97.1% 0.014 256.3);

  --noora-blue-100: oklch(90.2% 0.048 259.1);

  --noora-blue-200: oklch(83.4% 0.083 259.8);

  --noora-blue-300: oklch(76.6% 0.12 259.9);

  --noora-blue-400: oklch(69.7% 0.169 259.9);

  --noora-blue-500: oklch(63% 0.182 259.5);

  --noora-blue-600: oklch(54.6% 0.208 259.6);

  --noora-blue-700: oklch(43.4% 0.172 259.4);

  --noora-blue-800: oklch(31.4% 0.125 259.5);

  --noora-blue-900: oklch(20.9% 0.083 259.4);



  --noora-neutral-light-50: oklch(99.4% 0 0);

  --noora-neutral-light-100: oklch(98.4% 0.001 197.1);

  --noora-neutral-light-200: oklch(96.1% 0.003 264.5);

  --noora-neutral-light-300: oklch(93% 0.003 247.9);

  --noora-neutral-light-400: oklch(89% 0.006 255.5);

  --noora-neutral-light-500: oklch(84.3% 0.009 247.9);

  --noora-neutral-light-600: oklch(78.6% 0.012 248);

  --noora-neutral-light-700: oklch(72.1% 0.017 248.1);

  --noora-neutral-light-800: oklch(64.5% 0.021 248.2);

  --noora-neutral-light-900: oklch(55.7% 0.023 250.5);

  --noora-neutral-light-1000: oklch(45.2% 0.017 245);

  --noora-neutral-light-1100: oklch(31.8% 0.012 248.2);

  --noora-neutral-light-1200: oklch(21.5% 0.006 236.9);



  --noora-neutral-dark-50: oklch(91.5% 0.01 261.8);

  --noora-neutral-dark-100: oklch(85% 0.009 258.3);

  --noora-neutral-dark-200: oklch(71.1% 0.01 258.3);

  --noora-neutral-dark-300: oklch(62.6% 0.01 264.5);

  --noora-neutral-dark-400: oklch(56.5% 0.01 264.5);

  --noora-neutral-dark-500: oklch(53.1% 0.01 264.5);

  --noora-neutral-dark-600: oklch(48.8% 0.01 264.5);

  --noora-neutral-dark-700: oklch(43.4% 0.011 264.5);

  --noora-neutral-dark-800: oklch(40.1% 0.009 260.7);

  --noora-neutral-dark-900: oklch(35.9% 0.011 264.4);

  --noora-neutral-dark-1000: oklch(31.6% 0.01 260.7);

  --noora-neutral-dark-1100: oklch(24.8% 0.01 268.3);

  --noora-neutral-dark-1200: oklch(20.8% 0.009 264.4);



  --noora-neutral-gray-50: oklch(35.94% 0.0111 264.43 / 0.5);

  --noora-neutral-gray-24: oklch(31.82% 0.0113 248.18 / 0.24);

  --noora-neutral-gray-16: oklch(40.07% 0.0093 260.72 / 0.16);



  --noora-alpha-red: oklch(58.7% 0.23 30.7 / 0.16);

  --noora-alpha-orange: oklch(71.9% 0.185 48.7 / 0.16);

  --noora-alpha-yellow: oklch(84.8% 0.174 86.1 / 0.16);

  --noora-alpha-green: oklch(64% 0.175 146.7 / 0.16);

  --noora-alpha-azure: oklch(57% 0.127 238.5 / 0.16);

  --noora-alpha-blue: oklch(63% 0.182 259.5 / 0.16);

  --noora-alpha-purple: oklch(53.2% 0.276 286.9 / 0.16);

  --noora-alpha-pink: oklch(57.4% 0.218 7.8 / 0.16);

  --noora-alpha-black: oklch(0% 0 0 / 0.5);



  /* Semantic colors */

  /* Background */

  --noora-surface-background-primary: light-dark(

    var(--noora-neutral-light-50),

    var(--noora-neutral-dark-1200)

  );

  --noora-surface-background-secondary: light-dark(

    var(--noora-neutral-light-200),

    var(--noora-neutral-dark-1100)

  );

  --noora-surface-background-tertiary: light-dark(

    var(--noora-neutral-light-100),

    var(--noora-neutral-dark-1100)

  );

  --noora-surface-overlay: light-dark(

    var(--noora-neutral-gray-24),

    var(--noora-neutral-gray-16)

  );



  /* Label */

  --noora-surface-label-primary: light-dark(

    var(--noora-neutral-light-1200),

    var(--noora-neutral-light-50)

  );

  --noora-surface-label-secondary: light-dark(

    var(--noora-neutral-light-800),

    var(--noora-neutral-light-500)

  );

  --noora-surface-label-tertiary: light-dark(

    var(--noora-neutral-light-700),

    var(--noora-neutral-dark-500)

  );

  --noora-surface-label-destructive: light-dark(

    var(--noora-red-500),

    var(--noora-red-300)

  );

  --noora-surface-label-disabled: light-dark(

    var(--noora-neutral-light-600),

    var(--noora-neutral-dark-300)

  );



  /* Button */

  --noora-button-primary-background: var(--noora-purple-500);

  --noora-button-primary-label: var(--noora-neutral-light-50);

  --noora-button-primary-disabled-background: var(--noora-purple-300);

  --noora-button-primary-disabled-label: var(--noora-neutral-light-200);

  --noora-button-secondary-background: light-dark(

    var(--noora-neutral-light-50),

    var(--noora-neutral-dark-1100)

  );

  --noora-button-secondary-label: light-dark(

    var(--noora-neutral-light-1200),

    var(--noora-neutral-light-50)

  );

  --noora-button-secondary-disabled-background: light-dark(

    var(--noora-neutral-light-100),

    var(--noora-neutral-dark-1000)

  );

  --noora-button-neutral-background-hover: light-dark(

    var(--noora-neutral-light-200),

    var(--noora-neutral-dark-1000)

  );

  --noora-button-neutral-background-active: light-dark(

    var(--noora-neutral-light-300),

    var(--noora-neutral-dark-900)

  );

  --noora-button-secondary-disabled-label: var(--noora-neutral-light-600);

  --noora-button-destructive-background: var(--noora-red-500);

  --noora-button-destructive-label: var(--noora-neutral-light-50);

  --noora-button-destructive-disabled-background: var(--noora-red-300);

  --noora-button-destructive-disabled-label: var(--noora-neutral-light-200);

  --noora-button-neutral-label: light-dark(

    var(--noora-neutral-light-1200),

    var(--noora-neutral-light-50)

  );

  --noora-button-neutral-disabled-label: light-dark(

    var(--noora-neutral-light-600),

    var(--noora-neutral-dark-600)

  );



  --noora-button-background-primary:

    linear-gradient(

      180deg,

      oklch(100% 0 0 / 0.16) 0%,

      oklch(100% 0 0 / 0) 100%

    ),

    var(--noora-button-primary-background);

  --noora-button-background-primary-hover:

    linear-gradient(

      180deg,

      oklch(100% 0 0 / 0.08) 0%,

      oklch(100% 0 0 / 0) 100%

    ),

    var(--noora-button-primary-background);

  --noora-button-background-primary-active: var(

    --noora-button-primary-background

  );

  --noora-button-background-primary-disabled:

    linear-gradient(

      180deg,

      light-dark(oklch(100% 0 0 / 0.16), oklch(31.8% 0.011 248.2 / 0.25)),

      light-dark(oklch(100% 0 0 / 0), oklch(31.8% 0.011 248.2 / 0.5))

    ),

    var(--noora-button-primary-disabled-background);

  --noora-button-border-primary:

    0px 1px 0px 0px oklch(100% 0 0 / 0.2) inset,

    0px 1px 1px 0px

      light-dark(

        oklch(31.8% 0.011 248.2 / 0.05),

        oklch(20.9% 0.009 264.4 / 0.2)

      ),

    0px 0px 0px 1px oklch(46.9% 0.27 286.9 / 0.9),

    0px 1px 3px 0px

      light-dark(oklch(31.8% 0.011 248.2 / 0.16), oklch(0% 0 0 / 0.4));

  --noora-button-border-primary-hover:

    0px 1px 1px oklch(31.8% 0.011 248.2 / 0.12),

    0px 0px 0px 1px oklch(46.9% 0.27 286.9 / 0.9),

    0px 2px 3px oklch(31.8% 0.011 248.2 / 0.16),

    0px 1px 0px oklch(100% 0 0 / 0.1) inset;

  --noora-button-border-primary-active:

    0px 0px 0px 1px oklch(46.9% 0.27 286.9 / 0.9),

    0px 1px 4px 0px light-dark(oklch(0% 0 0 / 0.3), oklch(0% 0 0 / 0.4)) inset;

  --noora-button-border-primary-disabled:

    0px 1px 0px 0px oklch(100% 0 0 / 0.2) inset,

    0px 1px 1px 0px

      light-dark(

        oklch(31.8% 0.011 248.2 / 0.12),

        oklch(20.9% 0.009 264.4 / 0.2)

      ),

    0px 0px 0px 1px oklch(46.9% 0.27 286.9 / 0.4),

    0px 2px 3px 0px

      light-dark(oklch(31.8% 0.011 248.2 / 0.16), oklch(0% 0 0 / 0.4));



  --noora-button-background-secondary:

    linear-gradient(

      180deg,

      light-dark(oklch(78.6% 0.013 248 / 0), oklch(100% 0 0 / 0.06)),

      light-dark(oklch(78.6% 0.013 248 / 0.06), oklch(100% 0 0 / 0))

    ),

    var(--noora-button-secondary-background);

  --noora-button-background-secondary-hover:

    linear-gradient(

      180deg,

      light-dark(oklch(78.6% 0.013 248 / 0.03), oklch(100% 0 0 / 0.03)),

      light-dark(oklch(78.6% 0.013 248 / 0.13), oklch(100% 0 0 / 0))

    ),

    var(--noora-button-secondary-background);

  --noora-button-background-secondary-disabled:

    linear-gradient(

      180deg,

      light-dark(oklch(78.6% 0.013 248 / 0), oklch(100% 0 0 / 0.06)),

      light-dark(oklch(78.6% 0.013 248 / 0.06), oklch(100% 0 0 / 0))

    ),

    var(--noora-button-secondary-disabled-background);

  --noora-button-border-secondary:

    0px 1px 0px 0px light-dark(oklch(100% 0 0 / 0.9), oklch(100% 0 0 / 0.12))

      inset,

    0px 1px 1px 0px

      light-dark(

        oklch(31.8% 0.011 248.2 / 0.05),

        oklch(20.9% 0.009 264.4 / 0.8)

      ),

    0px 0px 0px 1px

      light-dark(oklch(31.8% 0.011 248.2 / 0.08), oklch(31.6% 0.01 260.7 / 0.9)),

    0px 2px 3px 0px

      light-dark(oklch(31.8% 0.011 248.2 / 0.06), oklch(0% 0 0 / 0.24));

  --noora-button-border-secondary-disabled:

    0px 1px 0px 0px light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.12))

      inset,

    0px 1px 1px 0px

      light-dark(

        oklch(31.8% 0.011 248.2 / 0.05),

        oklch(20.9% 0.009 264.4 / 0.8)

      ),

    0px 0px 0px 1px

      light-dark(oklch(31.8% 0.011 248.2 / 0.05), oklch(31.6% 0.01 260.7 / 0.9)),

    0px 2px 3px 0px

      light-dark(oklch(31.8% 0.011 248.2 / 0.06), oklch(0% 0 0 / 0.24));

  --noora-button-background-secondary-active:

    linear-gradient(

      180deg,

      light-dark(oklch(78.6% 0.013 248 / 0.03), oklch(100% 0 0 / 0.03)),

      light-dark(oklch(78.6% 0.013 248 / 0.13), oklch(100% 0 0 / 0))

    ),

    var(--noora-button-secondary-background);

  --noora-button-border-secondary-active:

    0px 0px 0px 1px

      light-dark(oklch(31.8% 0.011 248.2 / 0.08), oklch(31.6% 0.01 260.7 / 0.9)),

    0px 1px 2px 0px light-dark(oklch(0% 0 0 / 0.05), oklch(0% 0 0 / 0.4)) inset;



  --noora-button-background-destructive:

    linear-gradient(180deg, oklch(100% 0 0 / 0.24), oklch(100% 0 0 / 0)),

    var(--noora-button-destructive-background);

  --noora-button-border-destructive:

    0px 1px 0px 0px oklch(100% 0 0 / 0.2) inset,

    0px 1px 1px 0px

      light-dark(

        oklch(31.8% 0.011 248.2 / 0.12),

        oklch(20.9% 0.009 264.4 / 0.2)

      ),

    0px 0px 0px 1px oklch(51.2% 0.201 30.7 / 0.8),

    0px 2px 3px 0px

      light-dark(oklch(31.8% 0.011 248.2 / 0.16), oklch(0% 0 0 / 0.4));

  --noora-button-background-destructive-hover:

    linear-gradient(180deg, oklch(100% 0 0 / 0.06), oklch(100% 0 0 / 0)),

    var(--noora-button-destructive-background);

  --noora-button-border-destructive-hover:

    0px 1px 0px 0px oklch(100% 0 0 / 0.1) inset,

    0px 1px 1px 0px

      light-dark(

        oklch(31.8% 0.011 248.2 / 0.12),

        oklch(20.9% 0.009 264.4 / 0.2)

      ),

    0px 0px 0px 1px oklch(51.2% 0.201 30.7 / 0.8),

    0px 2px 3px 0px

      light-dark(oklch(31.8% 0.011 248.2 / 0.16), oklch(0% 0 0 / 0.4));

  --noora-button-background-destructive-disabled:

    linear-gradient(

      180deg,

      light-dark(oklch(100% 0 0 / 0.32), oklch(31.8% 0.011 248.2 / 0.25)),

      light-dark(oklch(100% 0 0 / 0), oklch(31.8% 0.011 248.2 / 0.45))

    ),

    var(--noora-button-destructive-disabled-background);

  --noora-button-border-destructive-disabled:

    0px 1px 0px 0px oklch(100% 0 0 / 0.2) inset,

    0px 1px 1px 0px

      light-dark(

        oklch(31.8% 0.011 248.2 / 0.12),

        oklch(20.9% 0.009 264.4 / 0.2)

      ),

    0px 0px 0px 1px oklch(51.2% 0.201 30.7 / 0.5),

    0px 2px 3px 0px

      light-dark(oklch(31.8% 0.011 248.2 / 0.16), oklch(0% 0 0 / 0.4));

  --noora-button-border-destructive-active:

    0px 0px 0px 1px oklch(51.2% 0.201 30.7 / 0.8),

    0px 1px 4px 0px light-dark(oklch(0% 0 0 / 0.3), oklch(0% 0 0 / 0.4)) inset;



  /* Badge */

  --noora-badge-fill-label: light-dark(

    var(--noora-neutral-light-50),

    var(--noora-neutral-light-100)

  );

  --noora-badge-fill-neutral: light-dark(

    var(--noora-neutral-light-800),

    var(--noora-neutral-dark-600)

  );

  --noora-badge-fill-destructive: light-dark(

    var(--noora-red-500),

    var(--noora-red-700)

  );

  --noora-badge-fill-warning: light-dark(

    var(--noora-orange-500),

    var(--noora-orange-600)

  );

  --noora-badge-fill-attention: light-dark(

    var(--noora-yellow-600),

    var(--noora-yellow-600)

  );

  --noora-badge-fill-success: light-dark(

    var(--noora-green-500),

    var(--noora-green-600)

  );

  --noora-badge-fill-information: light-dark(

    var(--noora-azure-500),

    var(--noora-azure-700)

  );

  --noora-badge-fill-focus: light-dark(

    var(--noora-blue-500),

    var(--noora-blue-700)

  );

  --noora-badge-fill-primary: light-dark(

    var(--noora-purple-500),

    var(--noora-purple-700)

  );

  --noora-badge-fill-secondary: light-dark(

    var(--noora-pink-500),

    var(--noora-pink-700)

  );



  --noora-badge-light-fill-neutral-background: light-dark(

    var(--noora-neutral-light-400),

    color-mix(in oklch, var(--noora-neutral-dark-900) 50%, transparent)

  );

  --noora-badge-light-fill-neutral-label: light-dark(

    var(--noora-neutral-light-1100),

    var(--noora-neutral-light-100)

  );

  --noora-badge-light-fill-destructive-background: light-dark(

    var(--noora-red-50),

    color-mix(in oklch, var(--noora-red-500) 16%, transparent)

  );

  --noora-badge-light-fill-destructive-label: light-dark(

    var(--noora-red-600),

    var(--noora-red-500)

  );

  --noora-badge-light-fill-warning-background: light-dark(

    var(--noora-orange-50),

    color-mix(in oklch, var(--noora-orange-500) 16%, transparent)

  );

  --noora-badge-light-fill-warning-label: light-dark(

    var(--noora-orange-600),

    var(--noora-orange-500)

  );

  --noora-badge-light-fill-attention-background: light-dark(

    var(--noora-yellow-50),

    color-mix(in oklch, var(--noora-yellow-500) 16%, transparent)

  );

  --noora-badge-light-fill-attention-label: light-dark(

    var(--noora-yellow-700),

    var(--noora-yellow-500)

  );

  --noora-badge-light-fill-success-background: light-dark(

    var(--noora-green-50),

    color-mix(in oklch, var(--noora-green-500) 16%, transparent)

  );

  --noora-badge-light-fill-success-label: light-dark(

    var(--noora-green-700),

    var(--noora-green-500)

  );

  --noora-badge-light-fill-information-background: light-dark(

    var(--noora-azure-50),

    color-mix(in oklch, var(--noora-azure-500) 16%, transparent)

  );

  --noora-badge-light-fill-information-label: light-dark(

    var(--noora-azure-700),

    var(--noora-azure-400)

  );

  --noora-badge-light-fill-focus-background: light-dark(

    var(--noora-blue-50),

    color-mix(in oklch, var(--noora-blue-700) 16%, transparent)

  );

  --noora-badge-light-fill-focus-label: light-dark(

    var(--noora-blue-700),

    var(--noora-blue-500)

  );

  --noora-badge-light-fill-primary-background: light-dark(

    var(--noora-purple-50),

    color-mix(in oklch, var(--noora-purple-700) 16%, transparent)

  );

  --noora-badge-light-fill-primary-label: light-dark(

    var(--noora-purple-700),

    var(--noora-purple-400)

  );

  --noora-badge-light-fill-secondary-background: light-dark(

    var(--noora-pink-50),

    color-mix(in oklch, var(--noora-pink-700) 16%, transparent)

  );

  --noora-badge-light-fill-secondary-label: light-dark(

    var(--noora-pink-600),

    var(--noora-pink-500)

  );



  --noora-badge-disabled-background: light-dark(

    var(--noora-neutral-light-200),

    var(--noora-neutral-light-1000)

  );

  --noora-badge-disabled-label: light-dark(

    var(--noora-neutral-light-600),

    var(--noora-neutral-light-300)

  );



  --noora-badge-status-success: var(--noora-green-600);

  --noora-badge-status-warning: var(--noora-orange-600);

  --noora-badge-status-error: light-dark(

    var(--noora-red-500),

    var(--noora-red-600)

  );

  --noora-badge-status-attention: light-dark(

    var(--noora-yellow-600),

    var(--noora-yellow-500)

  );



  /* Borders */

  --noora-surface-border-primary: light-dark(

    var(--noora-neutral-light-500),

    var(--noora-neutral-dark-800)

  );

  --noora-light-border-default:

    0px 1px 1px 0px oklch(20.9% 0.009 264.4 / 0.05),

    0px 0px 0px 1px oklch(31.8% 0.011 248.2 / 0.08),

    0px 1px 1px 0px oklch(31.8% 0.011 248.2 / 0.1);



  --noora-light-border-focus:

    0px 1px 1px 0px oklch(20.9% 0.009 264.4 / 0.05),

    0px 0px 0px 1px oklch(31.8% 0.011 248.2 / 0.08),

    0px 1px 3px 0px oklch(31.8% 0.011 248.2 / 0.1),

    0px 0px 0px 3px oklch(31.8% 0.011 248.2 / 0.12);



  /* Table */

  --noora-surface-table-header: light-dark(

    var(--noora-neutral-light-200),

    var(--noora-neutral-dark-1000)

  );



  /* Choice Selector */

  --noora-choice-selector-uncheck-background:

    linear-gradient(

      180deg,

      oklch(78.6% 0.013 248 / 0) 0%,

      oklch(78.6% 0.013 248 / 0.06) 100%

    ),

    var(--noora-neutral-light-50);

  --noora-choice-selector-uncheck-background-hover:

    linear-gradient(

      180deg,

      oklch(78.6% 0.013 248 / 0.05) 0%,

      oklch(78.6% 0.013 248 / 0.19) 100%

    ),

    var(--noora-neutral-light-50);

  --noora-choice-selector-check-background:

    linear-gradient(

      180deg,

      oklch(100% 0 0 / 0.16) 0%,

      oklch(100% 0 0 / 0) 100%

    ),

    var(--noora-purple-500);

  --noora-choice-selector-check-background-hover:

    linear-gradient(

      180deg,

      oklch(100% 0 0 / 0.12) 0%,

      oklch(100% 0 0 / 0) 100%

    ),

    var(--noora-purple-500);

  --noora-choice-selector-disabled-background: light-dark(

    var(--noora-neutral-light-400),

    var(--noora-neutral-dark-900)

  );

  --noora-choice-selector-label: oklch(99.4% 0 0);



  /* Divider */

  --noora-content-divider-line: light-dark(

    var(--noora-neutral-light-500),

    var(--noora-alpha-black)

  );



  /* Charts */

  --noora-chart-primary: light-dark(

    var(--noora-purple-500),

    var(--noora-purple-400)

  );

  --noora-chart-secondary: light-dark(

    var(--noora-blue-500),

    var(--noora-blue-400)

  );

  --noora-chart-tertiary: light-dark(

    var(--noora-green-500),

    var(--noora-green-400)

  );

  --noora-chart-quaternary: light-dark(

    var(--noora-azure-500),

    var(--noora-azure-400)

  );

  --noora-chart-destructive: light-dark(

    var(--noora-red-400),

    var(--noora-red-300)

  );

  --noora-chart-flaky: light-dark(

    var(--noora-yellow-600),

    var(--noora-yellow-400)

  );

  --noora-chart-p99: light-dark(var(--noora-green-500), var(--noora-green-400));

  --noora-chart-p90: light-dark(var(--noora-pink-500), var(--noora-pink-400));

  --noora-chart-p50: light-dark(

    var(--noora-orange-600),

    var(--noora-orange-400)

  );

  --noora-chart-legend-primary: light-dark(

    var(--noora-purple-500),

    var(--noora-purple-400)

  );

  --noora-chart-legend-secondary: light-dark(

    var(--noora-blue-500),

    var(--noora-blue-400)

  );

  --noora-chart-lines: light-dark(

    var(--noora-neutral-light-300),

    var(--noora-neutral-gray-16)

  );

  --noora-sunburst-binaries: var(--noora-purple-500);

  --noora-sunburst-localizations: var(--noora-orange-500);

  --noora-sunburst-fonts: var(--noora-yellow-500);

  --noora-sunburst-assets: var(--noora-green-500);

  --noora-sunburst-videos: var(--noora-azure-500);

  --noora-sunburst-duplicates: var(--noora-red-500);

  --noora-sunburst-unknown: var(--noora-pink-500);

  --noora-sunburst-directory: var(--noora-neutral-light-500);

  --noora-sunburst-files: var(--noora-azure-500);



  /* Icons */

  --noora-icon-destructive-background: light-dark(

    var(--noora-red-50),

    var(--noora-alpha-red)

  );

  --noora-icon-destructive-label: light-dark(

    var(--noora-red-600),

    var(--noora-red-500)

  );

  --noora-icon-warning-background: light-dark(

    var(--noora-orange-50),

    var(--noora-alpha-orange)

  );

  --noora-icon-warning-label: light-dark(

    var(--noora-orange-600),

    var(--noora-orange-500)

  );

  --noora-icon-success-background: light-dark(

    var(--noora-green-50),

    var(--noora-alpha-green)

  );

  --noora-icon-success-label: light-dark(

    var(--noora-green-700),

    var(--noora-green-500)

  );

  --noora-icon-info-background: light-dark(

    var(--noora-azure-50),

    var(--noora-alpha-azure)

  );

  --noora-icon-info-label: light-dark(

    var(--noora-azure-700),

    var(--noora-azure-400)

  );

  --noora-icon-primary-label: light-dark(

    var(--noora-purple-500),

    var(--noora-purple-400)

  );



  /* Spacing */

  --noora-spacing-0: 0rem;

  --noora-spacing-1: 0.125rem;

  --noora-spacing-2: 0.25rem;

  --noora-spacing-3: 0.375rem;

  --noora-spacing-4: 0.5rem;

  --noora-spacing-5: 0.75rem;

  --noora-spacing-6: 1rem;

  --noora-spacing-7: 1.25rem;

  --noora-spacing-8: 1.5rem;

  --noora-spacing-9: 2rem;

  --noora-spacing-10: 2.5rem;

  --noora-spacing-11: 3rem;

  --noora-spacing-12: 3.5rem;

  --noora-spacing-13: 4rem;

  --noora-spacing-14: 4.5rem;

  --noora-spacing-15: 5rem;

  --noora-spacing-16: 6rem;



  /* Z-index */

  --noora-z-index-0: auto;

  --noora-z-index-1: 100;

  --noora-z-index-2: 400;

  --noora-z-index-3: 510;

  --noora-z-index-4: 512;

  --noora-z-index-5: 513;

  --noora-z-index-6: 514;

  --noora-z-index-7: 515;

  --noora-z-index-8: 516;

  --noora-z-index-9: 517;

  --noora-z-index-10: 518;

  --noora-z-index-11: 519;

  --noora-z-index-12: 520;



  /* Borders */

  --noora-surface-border-primary: light-dark(

    var(--noora-neutral-light-500),

    var(--noora-neutral-dark-800)

  );



  --noora-border-light-default:

    0px 1px 1px 0px oklch(20.9% 0.009 264.4 / 0.05),

    0px 0px 0px 1px oklch(31.8% 0.011 248.2 / 0.08),

    0px 1px 1px 0px oklch(31.8% 0.011 248.2 / 0.1);

  --noora-border-light-focus:

    0px 1px 1px 0px oklch(20.9% 0.009 264.4 / 0.05),

    0px 0px 0px 1px oklch(31.8% 0.011 248.2 / 0.08),

    0px 1px 3px 0px oklch(31.8% 0.011 248.2 / 0.1),

    0px 0px 0px 3px oklch(31.8% 0.011 248.2 / 0.12);

  --noora-border-light-error:

    0px 1px 1px 0px oklch(20.9% 0.009 264.4 / 0.05),

    0px 0px 0px 1px oklch(58.7% 0.23 30.7),

    0px 1px 3px 0px oklch(31.8% 0.011 248.2 / 0.1);

  --noora-border-light-error-focus:

    0px 1px 1px 0px oklch(20.9% 0.009 264.4 / 0.05),

    0px 0px 0px 1px oklch(58.7% 0.23 30.7),

    0px 1px 3px 0px oklch(31.8% 0.011 248.2 / 0.1),

    0px 0px 0px 3px oklch(58.7% 0.23 30.7 / 0.2);

  --noora-border-medium:

    0px 0px 0px 1px oklch(31.8% 0.011 248.2 / 0.08) inset,

    0px -1px 0px 0px oklch(31.8% 0.011 248.2 / 0.16) inset,

    0px 8px 6px 0px oklch(31.8% 0.011 248.2 / 0.02),

    0px 2px 4px 0px oklch(31.8% 0.011 248.2 / 0.04);

  --noora-border-section:

    0px 1px 0px 0px oklch(100% 0 0 / 0.9) inset,

    0px 1px 1px 0px oklch(31.8% 0.011 248.2 / 0.05),

    0px 0px 0px 1px oklch(31.8% 0.011 248.2 / 0.08),

    0px 2px 2px 0px oklch(31.8% 0.011 248.2 / 0.06);

  --noora-border-heavy:

    0px 0px 0px 1.5px oklch(31.82% 0.0113 248.18 / 0.1) inset,

    0px -1.5px 0px 0px oklch(31.82% 0.0113 248.18 / 0.12) inset,

    0px 4px 8px 0px oklch(31.82% 0.0113 248.18 / 0.08),

    0px 2px 4px 0px oklch(31.82% 0.0113 248.18 / 0.04);



  /* Radius */

  --noora-radius-none: 0rem;

  --noora-radius-xsmall: 0.125rem;

  --noora-radius-small: 0.25rem;

  --noora-radius-medium: 0.375rem;

  --noora-radius-large: 0.5rem;

  --noora-radius-xlarge: 0.75rem;

  --noora-radius-2xlarge: 1rem;

  --noora-radius-max: 1000px;



  /* Icon */

  --noora-icon-size-small: 0.75rem;

  --noora-icon-size-medium: 1rem;

  --noora-icon-size-large: 1.25rem;



  /* Typography */

  --noora-font-heading: "DM Sans", sans-serif;

  --noora-font-body: "Inter Variable", sans-serif;

  --noora-font-code: "Geist Mono", monospace;



  --noora-font-weight-regular: 400;

  --noora-font-weight-medium: 500;

  --noora-font-weight-semibold: 600;

  --noora-font-weight-bold: 700;



  --noora-font-display-xlarge: 2.5rem/3rem var(--noora-font-heading);

  --noora-font-display-large: 2.375rem/2.875rem var(--noora-font-heading);

  --noora-font-display-medium: 2.25rem/2.625rem var(--noora-font-heading);

  --noora-font-display-small: 2.125rem/2.5rem var(--noora-font-heading);

  --noora-font-heading-2xlarge: 2rem/2.375rem var(--noora-font-heading);

  --noora-font-heading-xlarge: 1.5rem/2rem var(--noora-font-heading);

  --noora-font-heading-large: 1.25rem/1.625rem var(--noora-font-heading);

  --noora-font-heading-medium: 1.125rem/1.5rem var(--noora-font-heading);

  --noora-font-heading-small: 1rem/1.375rem var(--noora-font-heading);

  --noora-font-body-large: 1rem/1.5rem var(--noora-font-body);

  --noora-font-body-medium: 0.875rem/1.25rem var(--noora-font-body);

  --noora-font-body-small: 0.75rem/1rem var(--noora-font-body);

  --noora-font-body-xsmall: 0.625rem/0.75rem var(--noora-font-body);

  --noora-font-code-large: 1rem/1.5rem var(--noora-font-code);

  --noora-font-code-medium: 0.75rem/1rem var(--noora-font-code);

  --noora-font-code-small: 0.625rem/0.75rem var(--noora-font-code);



  &[data-theme="dark"] {

    --noora-button-border-primary-hover:

      0px 1px 0px 0px oklch(100% 0 0 / 0.1) inset,

      0px 1px 1px 0px oklch(20.9% 0.009 264.4 / 0.2),

      0px 0px 0px 1px oklch(46.9% 0.27 286.9 / 0.9),

      0px 2px 3px 0px oklch(0% 0 0 / 0.4);

    --noora-button-border-secondary-hover:

      0px 1px 0px 0px oklch(100% 0 0 / 0.06) inset,

      0px 1px 1px 0px oklch(20.9% 0.009 264.4 / 0.8),

      0px 0px 0px 1px oklch(31.6% 0.01 260.7 / 0.9),

      0px 2px 3px 0px oklch(0% 0 0 / 0.24);

  }



  &[data-theme="dark"] {

    --noora-light-border-default:

      0px 1px 1px 0px oklch(20.9% 0.009 264.4 / 0.3),

      0px 0px 0px 1px oklch(53.1% 0.01 264.5 / 0.45),

      0px 2px 3px 0px oklch(0% 0 0 / 0.3);



    --noora-light-border-focus:

      0px 1px 1px 0px oklch(20.9% 0.009 264.4 / 0.2),

      0px 0px 0px 1px oklch(53.1% 0.01 264.5 / 0.3),

      0px 2px 3px 0px oklch(0% 0 0 / 0.3),

      0px 0px 0px 3px oklch(53.1% 0.01 264.5 / 0.4);

  }



  &[data-theme="dark"] {

    --noora-choice-selector-uncheck-background:

      linear-gradient(

        180deg,

        oklch(100% 0 0 / 0.05) 0%,

        oklch(100% 0 0 / 0) 100%

      ),

      var(--noora-neutral-dark-1100);



    --noora-choice-selector-uncheck-background-hover:

      linear-gradient(

        180deg,

        oklch(100% 0 0 / 0.03) 0%,

        oklch(100% 0 0 / 0) 100%

      ),

      var(--noora-neutral-dark-1100);

  }



  &[data-theme="dark"] {

    --noora-border-light-default:

      0px 1px 1px 0px oklch(20.9% 0.009 264.4 / 0.3),

      0px 0px 0px 1px oklch(53.1% 0.01 264.5 / 0.45),

      0px 2px 3px 0px oklch(0% 0 0 / 0.3);

    --noora-border-light-focus:

      0px 1px 1px 0px oklch(20.9% 0.009 264.4 / 0.2),

      0px 0px 0px 1px oklch(53.1% 0.01 264.5 / 0.3),

      0px 2px 3px 0px oklch(0% 0 0 / 0.3),

      0px 0px 0px 3px oklch(53.1% 0.01 264.5 / 0.4);

    --noora-border-light-error:

      0px 1px 1px 0px oklch(20.9% 0.009 264.4 / 0.2),

      0px 0px 0px 1px oklch(74% 0.159 30.9), 0px 2px 3px 0px oklch(0% 0 0 / 0.3);

    --noora-border-light-error-focus:

      0px 1px 1px 0px oklch(20.9% 0.009 264.4 / 0.2),

      0px 0px 0px 1px oklch(74% 0.159 30.9),

      0px 2px 3px 0px oklch(0% 0 0 / 0.3),

      0px 0px 0px 3px oklch(74% 0.159 30.9 / 0.25);

    --noora-border-medium:

      0px 1px 0px 0px oklch(53.1% 0.01 264.5 / 0.3) inset,

      0px 0px 0px 1px oklch(53.1% 0.01 264.5 / 0.2) inset,

      0px 2px 4px 0px oklch(0% 0 0 / 0.12), 0px 4px 8px 0px oklch(0% 0 0 / 0.24);

    --noora-border-section:

      0px 1px 0px 0px oklch(100% 0 0 / 0.2) inset,

      0px 1px 1px 0px oklch(20.9% 0.009 264.4 / 0.8),

      0px 0px 0px 1px oklch(40.1% 0.009 260.7 / 0.7),

      0px 2px 2px 0px oklch(0% 0 0 / 0.24);

    --noora-border-heavy:

      0px 1.5px 0px 0px oklch(53.07% 0.0101 264.48 / 0.3) inset,

      0px 0px 0px 1.5px oklch(53.07% 0.0101 264.48 / 0.2) inset,

      0px 4px 8px 0px oklch(0% 0 0 / 0.16), 0px 2px 4px 0px oklch(0% 0 0 / 0.24);

  }



  @media screen and (min-width: 768px) {

    --noora-font-display-xlarge: 4.5rem/4.875rem var(--noora-font-heading);

    --noora-font-display-large: 4rem/4.375rem var(--noora-font-heading);

    --noora-font-display-medium: 3.5rem/4rem var(--noora-font-heading);

    --noora-font-display-small: 3rem/3.5rem var(--noora-font-heading);

    --noora-font-heading-2xlarge: 2.5rem/2.875rem var(--noora-font-heading);

    --noora-font-heading-xlarge: 2rem/2.375rem var(--noora-font-heading);

    --noora-font-heading-large: 1.5rem/2rem var(--noora-font-heading);

    --noora-font-heading-medium: 1.25rem/1.625rem var(--noora-font-heading);

    --noora-font-heading-small: 1.125rem/1.5rem var(--noora-font-heading);

  }



  --noora-font-color-primary: light-dark(

    var(--noora-neutral-light-1100),

    var(-noora-neutral-light-100)

  );

  --noora-font-color-secondary: light-dark(

    var(--noora-neutral-light-1000),

    var(--noora-neutral-light-400)

  );

  --noora-font-color-disabled: light-dark(

    var(--noora-neutral-light-800),

    var(--noora-neutral-light-900)

  );

  --noora-font-color-information: light-dark(

    var(--noora-neutral-azure-500),

    var(--noora-neutral-azure-300)

  );

  --noora-font-color-success: light-dark(

    var(--noora-green-600),

    var(--noora-green-400)

  );

  --noora-font-color-warning: light-dark(

    var(--noora-orange-600),

    var(--noora-orange-400)

  );

  --noora-font-color-error: light-dark(

    var(--noora-red-500),

    var(--noora-red-300)

  );

}



/* Dark mode for Storybook only */

.noora-dark {

  color-scheme: dark;

}