@ably/ui 14.0.0-dev.f6c8d86 → 14.0.0

package/core/styles/properties.css

@@ -1,276 +1,278 @@
-:root {
-  /* Neutral colors */
-  --color-neutral-000: #ffffff;
-  --color-neutral-100: #f8fafc;
-  --color-neutral-200: #f4f8fb;
-  --color-neutral-300: #edf1f7;
-  --color-neutral-400: #e2e7ef;
-  --color-neutral-500: #c6ced9;
-  --color-neutral-600: #adb6c2;
-  --color-neutral-700: #89929f;
-  --color-neutral-800: #667085;
-  --color-neutral-900: #39414e;
-  --color-neutral-1000: #2b303b;
-  --color-neutral-1100: #202531;
-  --color-neutral-1200: #141924;
-  --color-neutral-1300: #03020d;
+@layer base {
+  :root {
+    /* Neutral colors */
+    --color-neutral-000: #ffffff;
+    --color-neutral-100: #f8fafc;
+    --color-neutral-200: #f4f8fb;
+    --color-neutral-300: #edf1f7;
+    --color-neutral-400: #e2e7ef;
+    --color-neutral-500: #c6ced9;
+    --color-neutral-600: #adb6c2;
+    --color-neutral-700: #89929f;
+    --color-neutral-800: #667085;
+    --color-neutral-900: #39414e;
+    --color-neutral-1000: #2b303b;
+    --color-neutral-1100: #202531;
+    --color-neutral-1200: #141924;
+    --color-neutral-1300: #03020d;
 
-  /* Ably orange */
-  --color-orange-100: #fff5f1;
-  --color-orange-200: #ffe3d8;
-  --color-orange-300: #ffc4ae;
-  --color-orange-400: #ff9c79;
-  --color-orange-500: #ff723f;
-  --color-orange-600: #ff5416;
-  --color-orange-700: #ff2739;
-  --color-orange-800: #e40000;
-  --color-orange-900: #b82202;
-  --color-orange-1000: #751500;
-  --color-orange-1100: #2a0b00;
+    /* Ably orange */
+    --color-orange-100: #fff5f1;
+    --color-orange-200: #ffe3d8;
+    --color-orange-300: #ffc4ae;
+    --color-orange-400: #ff9c79;
+    --color-orange-500: #ff723f;
+    --color-orange-600: #ff5416;
+    --color-orange-700: #ff2739;
+    --color-orange-800: #e40000;
+    --color-orange-900: #b82202;
+    --color-orange-1000: #751500;
+    --color-orange-1100: #2a0b00;
 
-  /* Secondary colours */
-  --color-yellow-100: #fffbef;
-  --color-yellow-200: #fff0ba;
-  --color-yellow-300: #ffe27c;
-  --color-yellow-400: #ffd43d;
-  --color-yellow-500: #f8c100;
-  --color-yellow-600: #e8a700;
-  --color-yellow-700: #ac8600;
-  --color-yellow-800: #654f00;
-  --color-yellow-900: #291c01;
-  --color-green-100: #f1fff1;
-  --color-green-200: #b8ffbb;
-  --color-green-300: #80ff85;
-  --color-green-400: #08ff13;
-  --color-green-500: #00e80b;
-  --color-green-600: #00c008;
-  --color-green-700: #008e06;
-  --color-green-800: #005303;
-  --color-green-900: #002a02;
-  --color-blue-100: #f1fbff;
-  --color-blue-200: #b8eaff;
-  --color-blue-300: #80d9ff;
-  --color-blue-400: #4ad4ff;
-  --color-blue-500: #2cc0ff;
-  --color-blue-600: #00a5ec;
-  --color-blue-700: #0284cd;
-  --color-blue-800: #004b75;
-  --color-blue-900: #001b2a;
-  --color-violet-100: #f7f2fe;
-  --color-violet-200: #d8bcfb;
-  --color-violet-300: #b986f8;
-  --color-violet-400: #9951f5;
-  --color-violet-500: #7a1bf2;
-  --color-violet-600: #5f0bc9;
-  --color-violet-700: #460894;
-  --color-violet-800: #2d055e;
-  --color-violet-900: #130228;
-  --color-pink-100: #fff1fc;
-  --color-pink-200: #ffb8f1;
-  --color-pink-300: #ff80e6;
-  --color-pink-400: #ff47db;
-  --color-pink-500: #ff17d2;
-  --color-pink-600: #d400ab;
-  --color-pink-700: #9c007e;
-  --color-pink-800: #630050;
-  --color-pink-900: #2a0022;
+    /* Secondary colours */
+    --color-yellow-100: #fffbef;
+    --color-yellow-200: #fff0ba;
+    --color-yellow-300: #ffe27c;
+    --color-yellow-400: #ffd43d;
+    --color-yellow-500: #f8c100;
+    --color-yellow-600: #e8a700;
+    --color-yellow-700: #ac8600;
+    --color-yellow-800: #654f00;
+    --color-yellow-900: #291c01;
+    --color-green-100: #f1fff1;
+    --color-green-200: #b8ffbb;
+    --color-green-300: #80ff85;
+    --color-green-400: #08ff13;
+    --color-green-500: #00e80b;
+    --color-green-600: #00c008;
+    --color-green-700: #008e06;
+    --color-green-800: #005303;
+    --color-green-900: #002a02;
+    --color-blue-100: #f1fbff;
+    --color-blue-200: #b8eaff;
+    --color-blue-300: #80d9ff;
+    --color-blue-400: #4ad4ff;
+    --color-blue-500: #2cc0ff;
+    --color-blue-600: #00a5ec;
+    --color-blue-700: #0284cd;
+    --color-blue-800: #004b75;
+    --color-blue-900: #001b2a;
+    --color-violet-100: #f7f2fe;
+    --color-violet-200: #d8bcfb;
+    --color-violet-300: #b986f8;
+    --color-violet-400: #9951f5;
+    --color-violet-500: #7a1bf2;
+    --color-violet-600: #5f0bc9;
+    --color-violet-700: #460894;
+    --color-violet-800: #2d055e;
+    --color-violet-900: #130228;
+    --color-pink-100: #fff1fc;
+    --color-pink-200: #ffb8f1;
+    --color-pink-300: #ff80e6;
+    --color-pink-400: #ff47db;
+    --color-pink-500: #ff17d2;
+    --color-pink-600: #d400ab;
+    --color-pink-700: #9c007e;
+    --color-pink-800: #630050;
+    --color-pink-900: #2a0022;
 
-  /* GUI colours */
-  /* Note: The ‘Light and ‘Dark’ refers to the colour of the background on which the colour is used. */
-  --color-gui-blue-default-light: #006edc;
-  --color-gui-blue-hover-light: #0862b9;
-  --color-gui-blue-active-light: #074095;
-  --color-gui-blue-default-dark: #4da6ff;
-  --color-gui-blue-hover-dark: #2894ff;
-  --color-gui-blue-active-dark: #0080ff;
-  --color-gui-blue-focus: #80b9f2;
-  --color-gui-unavailable: #a8a8a8;
-  --color-gui-success-green: #11cb24;
-  --color-gui-error-red: #fb0c0c;
-  --color-gui-focus: #80b9f2;
-  --color-gui-focus-outline: #80b9f2;
-  --color-gui-visited: #4887c2;
+    /* GUI colours */
+    /* Note: The ‘Light and ‘Dark’ refers to the colour of the background on which the colour is used. */
+    --color-gui-blue-default-light: #006edc;
+    --color-gui-blue-hover-light: #0862b9;
+    --color-gui-blue-active-light: #074095;
+    --color-gui-blue-default-dark: #4da6ff;
+    --color-gui-blue-hover-dark: #2894ff;
+    --color-gui-blue-active-dark: #0080ff;
+    --color-gui-blue-focus: #80b9f2;
+    --color-gui-unavailable: #a8a8a8;
+    --color-gui-success-green: #11cb24;
+    --color-gui-error-red: #fb0c0c;
+    --color-gui-focus: #80b9f2;
+    --color-gui-focus-outline: #80b9f2;
+    --color-gui-visited: #4887c2;
 
-  /* Colours replaced by neutral colours */
-  --color-white: var(--color-neutral-000);
-  --color-extra-light-grey: var(--color-neutral-100);
-  --color-light-grey: var(--color-neutral-200);
-  --color-mid-grey: var(--color-neutral-500);
-  --color-dark-grey: var(--color-neutral-800);
-  --color-charcoal-grey: var(--color-neutral-1000);
-  --color-cool-black: var(--color-neutral-1300);
+    /* Colours replaced by neutral colours */
+    --color-white: var(--color-neutral-000);
+    --color-extra-light-grey: var(--color-neutral-100);
+    --color-light-grey: var(--color-neutral-200);
+    --color-mid-grey: var(--color-neutral-500);
+    --color-dark-grey: var(--color-neutral-800);
+    --color-charcoal-grey: var(--color-neutral-1000);
+    --color-cool-black: var(--color-neutral-1300);
 
-  /* Colours replaced by orange colours */
-  --color-active-orange: var(--color-orange-600);
-  --color-bright-red: var(--color-orange-700);
-  --color-red-orange: var(--color-orange-800);
+    /* Colours replaced by orange colours */
+    --color-active-orange: var(--color-orange-600);
+    --color-bright-red: var(--color-orange-700);
+    --color-red-orange: var(--color-orange-800);
 
-  /* Colours replaced by secondary colours */
-  --color-electric-cyan: var(--color-blue-400);
-  --color-zingy-green: var(--color-green-400);
-  --color-jazzy-pink: var(--color-pink-500);
+    /* Colours replaced by secondary colours */
+    --color-electric-cyan: var(--color-blue-400);
+    --color-zingy-green: var(--color-green-400);
+    --color-jazzy-pink: var(--color-pink-500);
 
-  /* Colours replaced by GUI colours */
-  --color-gui-default: var(--color-gui-blue-default-light);
-  --color-gui-hover: var(--color-gui-blue-hover-light);
-  --color-gui-active: var(--color-gui-blue-active-light);
-  --color-gui-error: var(--color-gui-error-red);
-  --color-gui-success: var(--color-gui-success-green);
-  --color-gui-default-dark: var(--color-gui-blue-default-dark);
-  --color-gui-hover-dark: var(--color-gui-blue-hover-dark);
-  --color-gui-active-dark: var(--color-gui-blue-active-dark);
+    /* Colours replaced by GUI colours */
+    --color-gui-default: var(--color-gui-blue-default-light);
+    --color-gui-hover: var(--color-gui-blue-hover-light);
+    --color-gui-active: var(--color-gui-blue-active-light);
+    --color-gui-error: var(--color-gui-error-red);
+    --color-gui-success: var(--color-gui-success-green);
+    --color-gui-default-dark: var(--color-gui-blue-default-dark);
+    --color-gui-hover-dark: var(--color-gui-blue-hover-dark);
+    --color-gui-active-dark: var(--color-gui-blue-active-dark);
 
-  /* code syntax: theme */
-  --syntax-black: var(--color-neutral-1300);
-  --syntax-dark-grey: var(--color-neutral-800);
-  --syntax-mid-grey: var(--color-neutral-500);
-  --syntax-light-grey: var(--color-neutral-200);
-  --syntax-extra-light-grey: var(--color-neutral-100);
-  --syntax-orange: #e78c45;
-  --syntax-yellow: #e7c547;
-  --syntax-blue: #3490ec;
-  --syntax-green: #b9ca4a;
-  --syntax-red: #d54e53;
-  --syntax-lilac: #bb87d3;
+    /* code syntax: theme */
+    --syntax-black: var(--color-neutral-1300);
+    --syntax-dark-grey: var(--color-neutral-800);
+    --syntax-mid-grey: var(--color-neutral-500);
+    --syntax-light-grey: var(--color-neutral-200);
+    --syntax-extra-light-grey: var(--color-neutral-100);
+    --syntax-orange: #e78c45;
+    --syntax-yellow: #e7c547;
+    --syntax-blue: #3490ec;
+    --syntax-green: #b9ca4a;
+    --syntax-red: #d54e53;
+    --syntax-lilac: #bb87d3;
 
-  /* flat colors for social icons */
-  --icon-color-linkedin: #1269bf;
-  --icon-color-twitter: #2caae1;
-  --icon-color-glassdoor: #0baa41;
-  --icon-color-github: #000000;
-  --icon-color-discord: #5865f2;
-  --icon-color-stackoverflow: #f48024;
-  --icon-color-youtube: #ff0000;
+    /* flat colors for social icons */
+    --icon-color-linkedin: #1269bf;
+    --icon-color-twitter: #2caae1;
+    --icon-color-glassdoor: #0baa41;
+    --icon-color-github: #000000;
+    --icon-color-discord: #5865f2;
+    --icon-color-stackoverflow: #f48024;
+    --icon-color-youtube: #ff0000;
 
-  --gradient-active-orange: linear-gradient(
-    61.2deg,
-    var(--color-active-orange) 10.46%,
-    #fe5215 38.63%,
-    #fc4a13 54.38%,
-    #f73c10 67.07%,
-    #f1280a 78.13%,
-    #e90f04 88.02%,
-    var(--color-red-orange) 92.73%
-  );
+    --gradient-active-orange: linear-gradient(
+      61.2deg,
+      var(--color-active-orange) 10.46%,
+      #fe5215 38.63%,
+      #fc4a13 54.38%,
+      #f73c10 67.07%,
+      #f1280a 78.13%,
+      #e90f04 88.02%,
+      var(--color-red-orange) 92.73%
+    );
 
-  /* Used for smooth transitions from gradient to non-gradient backgrounds */
-  --gradient-transparent: linear-gradient(
-    0deg,
-    rgba(255, 255, 255, 0),
-    rgba(255, 255, 255, 0)
-  );
+    /* Used for smooth transitions from gradient to non-gradient backgrounds */
+    --gradient-transparent: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0)
+    );
 
-  --gradient-hot-pink: linear-gradient(
-    80.2deg,
-    var(--color-orange-700) 0%,
-    var(--color-jazzy-pink) 100%
-  );
+    --gradient-hot-pink: linear-gradient(
+      80.2deg,
+      var(--color-orange-700) 0%,
+      var(--color-jazzy-pink) 100%
+    );
 
-  --fs-title-xl: 3rem;
-  --fs-title: 2.75rem;
-  --fs-title-xs: 2.5rem;
-  --fs-h1-xl: 2.5rem;
-  --fs-h1: 2.25rem;
-  --fs-h1-xs: 2rem;
+    --fs-title-xl: 3rem;
+    --fs-title: 2.75rem;
+    --fs-title-xs: 2.5rem;
+    --fs-h1-xl: 2.5rem;
+    --fs-h1: 2.25rem;
+    --fs-h1-xs: 2rem;
 
-  --fs-h2-xl: 2.125rem;
-  --fs-h2: 2rem;
-  --fs-h2-xs: 1.75rem;
+    --fs-h2-xl: 2.125rem;
+    --fs-h2: 2rem;
+    --fs-h2-xs: 1.75rem;
 
-  --fs-h3: 1.5rem;
-  --fs-h4: 1.25rem;
-  --fs-h5: 1rem;
+    --fs-h3: 1.5rem;
+    --fs-h4: 1.25rem;
+    --fs-h5: 1rem;
 
-  --fs-p1: 1rem;
-  --fs-p2: 0.938rem;
-  --fs-p3: 0.875rem;
-  --fs-standfirst-xl: 2.25rem;
-  --fs-standfirst: 1.5rem;
-  --fs-sub-header: 1.125rem;
-  --fs-sub-header-xs: 1.063rem;
-  --fs-overline1: 1rem;
-  --fs-overline2: 0.875rem;
-  --fs-btn1: 1rem;
-  --fs-btn2: 0.938rem;
-  --fs-btn3: 0.875rem;
-  --fs-menu1: 1rem;
-  --fs-menu2: 0.938rem;
-  --fs-menu3: 0.875rem;
-  --fs-quote: 1.25rem;
-  --fs-code: 0.938rem;
-  --fs-code2: 0.813rem;
+    --fs-p1: 1rem;
+    --fs-p2: 0.938rem;
+    --fs-p3: 0.875rem;
+    --fs-standfirst-xl: 2.25rem;
+    --fs-standfirst: 1.5rem;
+    --fs-sub-header: 1.125rem;
+    --fs-sub-header-xs: 1.063rem;
+    --fs-overline1: 1rem;
+    --fs-overline2: 0.875rem;
+    --fs-btn1: 1rem;
+    --fs-btn2: 0.938rem;
+    --fs-btn3: 0.875rem;
+    --fs-menu1: 1rem;
+    --fs-menu2: 0.938rem;
+    --fs-menu3: 0.875rem;
+    --fs-quote: 1.25rem;
+    --fs-code: 0.938rem;
+    --fs-code2: 0.813rem;
 
-  --lh-dense: 1;
-  --lh-tight: 1.125;
-  --lh-snug: 1.15;
-  --lh-min-normal: 1.2;
-  --lh-normal: 1.25;
-  --lh-relaxed: 1.45;
-  --lh-extra-relaxed: 1.6;
+    --lh-dense: 1;
+    --lh-tight: 1.125;
+    --lh-snug: 1.15;
+    --lh-min-normal: 1.2;
+    --lh-normal: 1.25;
+    --lh-relaxed: 1.45;
+    --lh-extra-relaxed: 1.6;
 
-  --ls-tighten-0_025: -0.025em;
-  --ls-tighten-0_02: -0.02em;
-  --ls-tighten-0_015: -0.015em;
-  --ls-tighten-0_01: -0.01em;
-  --ls-tighten-0_005: -0.005em;
-  --ls-tighten-0_0025: -0.0025em;
-  --ls-tighten-0_0015: -0.0015em;
-  --ls-widen-0_1: 0.1em;
-  --ls-widen-0_16: 0.16em;
-  --ls-widen-0_15: 0.15em;
+    --ls-tighten-0_025: -0.025em;
+    --ls-tighten-0_02: -0.02em;
+    --ls-tighten-0_015: -0.015em;
+    --ls-tighten-0_01: -0.01em;
+    --ls-tighten-0_005: -0.005em;
+    --ls-tighten-0_0025: -0.0025em;
+    --ls-tighten-0_0015: -0.0015em;
+    --ls-widen-0_1: 0.1em;
+    --ls-widen-0_16: 0.16em;
+    --ls-widen-0_15: 0.15em;
 
-  --spacing-0: 0px;
-  --spacing-1: 1px;
-  --spacing-2: 0.125rem;
-  --spacing-4: 0.25rem;
-  --spacing-6: 0.375rem;
-  --spacing-8: 0.5rem;
-  --spacing-12: 0.75rem;
-  --spacing-14: 0.875rem;
-  --spacing-16: 1rem;
-  --spacing-20: 1.25rem;
-  --spacing-24: 1.5rem;
-  --spacing-32: 2rem;
-  --spacing-36: 2.25rem;
-  --spacing-40: 2.5rem;
-  --spacing-48: 3rem;
-  --spacing-64: 4rem;
-  --spacing-72: 4.5rem;
-  --spacing-80: 5rem;
-  --spacing-88: 5.5rem;
-  --spacing-96: 6rem;
-  --spacing-128: 8rem;
-  --spacing-160: 10rem;
-  --spacing-256: 16rem;
+    --spacing-0: 0px;
+    --spacing-1: 1px;
+    --spacing-2: 0.125rem;
+    --spacing-4: 0.25rem;
+    --spacing-6: 0.375rem;
+    --spacing-8: 0.5rem;
+    --spacing-12: 0.75rem;
+    --spacing-14: 0.875rem;
+    --spacing-16: 1rem;
+    --spacing-20: 1.25rem;
+    --spacing-24: 1.5rem;
+    --spacing-32: 2rem;
+    --spacing-36: 2.25rem;
+    --spacing-40: 2.5rem;
+    --spacing-48: 3rem;
+    --spacing-64: 4rem;
+    --spacing-72: 4.5rem;
+    --spacing-80: 5rem;
+    --spacing-88: 5.5rem;
+    --spacing-96: 6rem;
+    --spacing-128: 8rem;
+    --spacing-160: 10rem;
+    --spacing-256: 16rem;
 
-  --spacing-btn-small: 0.875rem 1.25rem; /* 14px 16px */
-  --spacing-btn-xsmall: 0.875rem 1rem; /* 14px 16px */
-  --spacing-btn: 0.875rem 1.5rem; /* 14px 24px */
-  --spacing-btn-large: 0.875rem 1.75rem; /* 14px 28px */
-  --spacing-menu-row: 0.625rem 0.5rem 0.6875rem; /* 10px 8px 11px */
-  --spacing-menu-row-snug: 0.4375rem 0.5rem 0.375rem; /* 7px 8px 6px */
-  --spacing-menu-row-title: 0.6875rem 0.5rem; /* 11px 8px */
-  --spacing-media: 0.5rem; /* 8px */
-  --spacing-input: 0.8125rem 1rem 0.75rem; /* 13px 16px 12px */
-  --spacing-overline: 0.6875rem 0; /* 11px 0 */
-  --spacing-chip-xsmall: 0.375rem 0.5rem; /* 6px 8px */
-  --spacing-chip-small: 0.5rem 0.75rem; /* 8px 12px */
-  --spacing-chip: 0.75rem 1rem; /* 6px 8px */
-  --spacing-chip-large: 1rem 1.25rem; /* 16px 20px */
-  --spacing-inline-code: 0.375rem 0.5rem; /* 6px 8px */
+    --spacing-btn-small: 0.875rem 1.25rem; /* 14px 16px */
+    --spacing-btn-xsmall: 0.875rem 1rem; /* 14px 16px */
+    --spacing-btn: 0.875rem 1.5rem; /* 14px 24px */
+    --spacing-btn-large: 0.875rem 1.75rem; /* 14px 28px */
+    --spacing-menu-row: 0.625rem 0.5rem 0.6875rem; /* 10px 8px 11px */
+    --spacing-menu-row-snug: 0.4375rem 0.5rem 0.375rem; /* 7px 8px 6px */
+    --spacing-menu-row-title: 0.6875rem 0.5rem; /* 11px 8px */
+    --spacing-media: 0.5rem; /* 8px */
+    --spacing-input: 0.8125rem 1rem 0.75rem; /* 13px 16px 12px */
+    --spacing-overline: 0.6875rem 0; /* 11px 0 */
+    --spacing-chip-xsmall: 0.375rem 0.5rem; /* 6px 8px */
+    --spacing-chip-small: 0.5rem 0.75rem; /* 8px 12px */
+    --spacing-chip: 0.75rem 1rem; /* 6px 8px */
+    --spacing-chip-large: 1rem 1.25rem; /* 16px 20px */
+    --spacing-inline-code: 0.375rem 0.5rem; /* 6px 8px */
 
-  /* In components, when looking at implementing viewport margin and spacing between elements,
+    /* In components, when looking at implementing viewport margin and spacing between elements,
        the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
        alternatively, look for ui-grid-* helpers. */
-  --bp-xs: 428px; /* gutters 8px, side-margin 24px */
-  --bp-sm: 768px; /* gutters 16px, side-margin 32px */
-  --bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
-  --bp-lg: 1280px; /* gutters 24px, side-margin 64px */
-  --bp-xl: 1440px; /* gutters 32px, side-margin 64px */
+    --bp-xs: 428px; /* gutters 8px, side-margin 24px */
+    --bp-sm: 768px; /* gutters 16px, side-margin 32px */
+    --bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
+    --bp-lg: 1280px; /* gutters 24px, side-margin 64px */
+    --bp-xl: 1440px; /* gutters 32px, side-margin 64px */
 
-  /* Page stacking context. If components create new stacking contexts z-index values should be defined within them. */
-  --stacking-context-page-meganav: 100;
+    /* Page stacking context. If components create new stacking contexts z-index values should be defined within them. */
+    --stacking-context-page-meganav: 100;
 
-  /* Expose component values for cross-component usage */
-  --ui-meganav-height: 4rem;
+    /* Expose component values for cross-component usage */
+    --ui-meganav-height: 4rem;
+  }
 }