@ably/ui 13.3.0 → 14.0.0-dev.fbce38f

package/core/styles.css

@@ -1,699 +1,2 @@
-@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;
-
-    /* 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;
-
-    /* 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 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);
-
-    /* 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;
-
-    /* uptime status colors */
-    --uptime-color-up: #39b54a;
-    --uptime-color-trouble: #e87623;
-    --uptime-color-down: #e6242c;
-
-    /* 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%
-    );
-
-    /* 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%
-    );
-
-    --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-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;
-
-    --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;
-
-    --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 */
-
-    /* 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 */
-
-    /* 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;
-    --ui-showcase-client-logo-min-width: 8.75rem; /* 140px at 16px base*/
-    --ui-showcase-client-logo-max-width: 15rem; /* 240px at 16px base*/
-  }
-}
-@layer components {
-  .ui-btn {
-    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply hover:text-white hover:bg-active-orange;
-    @apply active:text-white active:bg-red-orange;
-    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
-  }
-
-  .ui-btn-alt {
-    transition: background-position 0.2s;
-    background: linear-gradient(
-      61.2deg,
-      var(--color-active-orange) 5%,
-      #fe5215 19%,
-      #fc4a13 27%,
-      #f73c10 33%,
-      #f1280a 39%,
-      #e90f04 44%,
-      var(--color-red-orange) 50%
-    );
-    background-size: 200% 100%;
-    background-position: 0% 0%;
-
-    @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply focus:outline-gui-focus;
-    @apply inline-flex items-center justify-center;
-  }
-
-  .ui-btn-alt:hover,
-  .ui-btn-alt:focus {
-    background-position: 100% 0%;
-  }
-
-  .ui-btn-alt:disabled {
-    background: linear-gradient(var(--gradient-transparent));
-    @apply bg-gui-unavailable text-mid-grey cursor-not-allowed;
-  }
-
-  .ui-btn-invert {
-    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply hover:text-white hover:bg-active-orange;
-    @apply active:text-white active:bg-red-orange;
-    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
-  }
-
-  .ui-btn-secondary {
-    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
-    @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
-    @apply active:border-red-orange active:bg-white;
-    @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
-  }
-
-  .ui-btn-secondary-invert {
-    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
-    @apply hover:text-white hover:border-active-orange;
-    @apply active:border-red-orange;
-    @apply focus:outline-gui-focus;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
-  }
-
-  .ui-btn-icon {
-    @apply w-24 h-24 mr-16;
-  }
-
-  .ui-btn-icon-small {
-    @apply w-20 h-20 mr-12;
-  }
-
-  .ui-btn-icon-xsmall {
-    @apply w-16 h-16 mr-8;
-  }
-
-  .ui-chip {
-    @apply text-btn3 p-chip rounded text-cool-black;
-    @apply hover:bg-mid-grey;
-    @apply active:bg-red-orange active:text-white;
-    @apply focus:bg-red-orange focus:text-white focus:outline-none;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-  }
-
-  .ui-chip[data-selected] {
-    @apply bg-active-orange text-white;
-  }
-
-  .ui-chip[data-selected]:hover {
-    @apply bg-mid-grey text-cool-black;
-  }
-
-  .ui-chip[data-selected]:focus {
-    @apply bg-red-orange text-white;
-  }
-
-  .ui-chip-alt {
-    @apply text-btn3 p-chip rounded text-white;
-    @apply hover:bg-gui-hover;
-    @apply active:bg-gui-active active:text-white;
-    @apply focus:bg-gui-active focus:text-white focus:outline-none;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-  }
-
-  .ui-chip-alt[data-selected] {
-    @apply bg-dark-grey text-white;
-  }
-  .ui-chip-alt[data-selected]:hover {
-    @apply bg-gui-hover text-white;
-  }
-
-  .ui-chip-alt[data-selected]:focus {
-    @apply bg-gui-active text-white;
-  }
-}
-@layer components {
-  .ui-standard-container {
-    @apply w-full max-w-screen-xl mx-auto px-24 sm:px-32 md:px-40 lg:px-64;
-  }
-
-  .ui-grid-gap {
-    @apply gap-8 sm:gap-16 md:gap-24 xl:gap-32;
-  }
-
-  .ui-grid-gap-x {
-    @apply gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32;
-  }
-
-  .ui-grid-px {
-    @apply px-24 sm:px-32 md:px-40 lg:px-64;
-  }
-
-  .ui-grid-mx {
-    @apply mx-24 sm:mx-32 md:mx-40 lg:mx-64;
-  }
-}
-@layer components {
-  .ui-text-title {
-    @apply font-sans font-extrabold text-cool-black;
-    @apply text-title-xs xs:text-title xl:text-title-xl;
-    @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
-  }
-
-  .ui-text-h1 {
-    @apply font-sans font-extrabold text-cool-black;
-    @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
-    @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
-  }
-
-  .ui-text-h2 {
-    @apply font-sans font-extrabold text-cool-black;
-    @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
-    @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
-  }
-
-  .ui-text-h3 {
-    @apply font-sans font-extrabold text-cool-black;
-    @apply text-h3;
-    @apply tracking-tighten-0.005;
-  }
-
-  .ui-text-h4 {
-    @apply font-sans font-extrabold text-cool-black;
-    @apply text-h4;
-    @apply tracking-tighten-0.0015;
-  }
-
-  .ui-text-h5 {
-    @apply font-sans font-extrabold text-cool-black;
-    @apply text-h5;
-    @apply tracking-tighten-0.0025;
-  }
-
-  .ui-text-p1 {
-    @apply font-sans font-medium text-charcoal-grey;
-    @apply text-p1;
-  }
-
-  .ui-text-p2 {
-    @apply font-sans font-medium text-charcoal-grey;
-    @apply text-p2;
-  }
-
-  .ui-text-p3 {
-    @apply font-sans font-medium text-charcoal-grey;
-    @apply text-p3;
-  }
-
-  .ui-text-standfirst {
-    @apply font-sans font-light text-active-orange;
-    @apply text-standfirst xl:text-standfirst-xl;
-    @apply tracking-tighten-0.025 xl:tracking-tighten-0.015;
-  }
-
-  .ui-text-quote {
-    @apply font-sans font-normal text-cool-black;
-    @apply text-quote leading-normal;
-    @apply tracking-tighten-0.0015;
-  }
-
-  .ui-text-sub-header {
-    @apply font-sans font-semibold text-neutral-800;
-    @apply text-sub-header-xs xs:text-sub-header leading-normal;
-  }
-
-  .ui-text-overline1 {
-    @apply font-mono font-medium text-active-orange uppercase;
-    @apply text-overline1 leading-normal;
-    @apply tracking-widen-0.16;
-  }
-
-  .ui-text-overline2 {
-    @apply font-mono font-medium text-active-orange uppercase;
-    @apply text-overline2 leading-normal;
-    @apply tracking-widen-0.16;
-  }
-
-  .ui-text-menu1 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-menu1 leading-snug;
-  }
-
-  .ui-text-menu2 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-menu2 leading-snug;
-  }
-
-  .ui-text-menu3 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-menu3 leading-snug;
-  }
-
-  .ui-text-code {
-    @apply font-mono font-normal text-code;
-  }
-
-  .ui-text-code2 {
-    @apply font-mono font-normal text-code2;
-  }
-
-  .ui-text-code-inline {
-    @apply font-mono font-normal text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
-  }
-
-  .ui-unordered-list {
-    @apply text-p1 font-medium text-charcoal-grey;
-    @apply ml-32 my-16;
-    @apply list-disc;
-  }
-
-  .ui-ordered-list {
-    @apply text-p1 font-medium text-charcoal-grey;
-    @apply ml-32 my-16;
-    @apply list-decimal;
-  }
-
-  .ui-ordered-list li,
-  .ui-unordered-list li {
-    @apply mb-8;
-  }
-
-  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
-  .ui-ordered-list li > *:last-of-type:not(ul):not(ol) {
-    margin-bottom: 0;
-  }
-
-  .ui-unordered-list ul {
-    @apply ml-24 my-8 list-circle;
-  }
-
-  .ui-ordered-list ol {
-    @apply ml-24 my-16 list-decimal;
-  }
-
-  .ui-unordered-list ul ul {
-    @apply list-square my-8;
-  }
-
-  .ui-unordered-list ul ul {
-    @apply my-8;
-  }
-
-  .ui-link {
-    @apply text-gui-default;
-    @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
-    @apply focus:text-gui-default focus:outline-gui-focus;
-    @apply no-underline;
-  }
-
-  .ui-link-neutral {
-    @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-    @apply focus:text-charcoal-grey;
-    @apply underline;
-  }
-
-  /* focus:outline-gui-focus-neutral does not get created under Tailwind 3.3.5, not sure why */
-  .ui-link-neutral:focus {
-    outline: 2px solid var(--color-neutral-000);
-  }
-
-  .ui-figcaption {
-    @apply font-mono text-p3 text-neutral-800;
-  }
-}
-@layer components {
-  .ui-checkbox-p1 {
-    @apply flex items-start mb-16 font-sans font-medium;
-  }
-
-  .ui-checkbox-p2 {
-    @apply flex items-start mb-12 font-sans font-medium;
-  }
-
-  .ui-checkbox-input {
-    @apply opacity-0 absolute h-20 w-20;
-  }
-
-  .ui-checkbox-styled {
-    @apply w-20 h-20 mr-16;
-    @apply bg-white flex flex-shrink-0 justify-center items-center;
-    @apply border border-dark-grey rounded-md focus-within:border-active-orange;
-  }
-
-  .ui-checkbox-styled-tick {
-    @apply hidden text-white;
-  }
-
-  .ui-checkbox-label-p1 {
-    @apply select-none;
-    @apply text-p1 font-medium text-cool-black;
-  }
-
-  .ui-checkbox-label-p2 {
-    @apply select-none;
-    @apply text-p2 font-medium text-cool-black;
-  }
-
-  .ui-checkbox-input:disabled + .ui-checkbox-styled {
-    @apply bg-gui-unavailable border;
-  }
-
-  .ui-checkbox-input:focus + .ui-checkbox-styled {
-    border-width: 0.125rem;
-    @apply border-gui-focus;
-  }
-
-  .ui-checkbox-input:checked + .ui-checkbox-styled {
-    @apply bg-active-orange border-dark-grey border;
-  }
-
-  .ui-checkbox-input:checked + .ui-checkbox-styled svg {
-    @apply block;
-  }
-
-  .ui-textarea {
-    @apply font-sans font-medium text-cool-black text-p1;
-    @apply p-input mb-16;
-    @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
-    @apply hover:bg-white hover:shadow-input hover:border-transparent;
-    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
-  }
-
-  .ui-textarea::-moz-placeholder {
-    /* CSS vars don't work in ::placeholder in Webkit :( */
-    /* color: var(--text-dark-grey); */
-    color: #76767c;
-  }
-
-  .ui-textarea::placeholder {
-    /* CSS vars don't work in ::placeholder in Webkit :( */
-    /* color: var(--text-dark-grey); */
-    color: #76767c;
-  }
-}
-@layer components {
-  .ui-input {
-    @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
-    @apply hover:bg-white hover:shadow-input hover:border-transparent;
-    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
-    @apply max-w-screen-sm;
-  }
-
-  /* Basis for icon component */
-  .ui-icon-cool-black {
-    stroke: var(--color-cool-black);
-  }
-
-  .ui-icon-white {
-    stroke: var(--color-white);
-  }
-
-  .ui-icon-dark-grey {
-    stroke: var(--color-dark-grey);
-  }
-
-  .ui-version-tag {
-    @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
-
-    position: relative;
-    vertical-align: super;
-    margin-left: 3px;
-    font-size: 8px;
-  }
-}
-
+@import "./styles.base.css";
+@import "./styles.components.css";

package/core/url-base.js

@@ -0,0 +1 @@
+var DEFAULT_URL_BASE="";var absUrl=function(path){var urlBase=arguments.length>1&&arguments[1]!==void 0?arguments[1]:DEFAULT_URL_BASE;return"".concat(urlBase).concat(path)};export default absUrl;

package/core/utils/syntax-highlighter-registry.js

@@ -0,0 +1 @@
+import bash from"highlight.js/lib/languages/bash";import cpp from"highlight.js/lib/languages/cpp";import csharp from"highlight.js/lib/languages/csharp";import css from"highlight.js/lib/languages/css";import dart from"highlight.js/lib/languages/dart";import dos from"highlight.js/lib/languages/dos";import diff from"highlight.js/lib/languages/diff";import erlang from"highlight.js/lib/languages/erlang";import elixir from"highlight.js/lib/languages/elixir";import plaintext from"highlight.js/lib/languages/plaintext";import go from"highlight.js/lib/languages/go";import http from"highlight.js/lib/languages/http";import java from"highlight.js/lib/languages/java";import javascript from"highlight.js/lib/languages/javascript";import typescript from"highlight.js/lib/languages/typescript";import json from"highlight.js/lib/languages/json";import objectivec from"highlight.js/lib/languages/objectivec";import php from"highlight.js/lib/languages/php";import python from"highlight.js/lib/languages/python";import ruby from"highlight.js/lib/languages/ruby";import swift from"highlight.js/lib/languages/swift";import kotlin from"highlight.js/lib/languages/kotlin";import sql from"highlight.js/lib/languages/sql";import xml from"highlight.js/lib/languages/xml";import yaml from"highlight.js/lib/languages/yaml";import curl from"highlightjs-curl/src/languages/curl";var registry=[{label:"Text",key:"text",module:plaintext},{label:"JS",key:"javascript",module:javascript},{label:"TS",key:"typescript",module:typescript},{label:"Java",key:"java",module:java},{label:"Ruby",key:"ruby",module:ruby},{label:"Python",key:"python",module:python},{label:"PHP",key:"php",module:php},{label:"Shell",key:"bash",module:bash},{label:"C#",key:"cs",module:csharp},{label:"CSS",key:"css",module:css},{label:"Go",key:"go",module:go},{label:"HTML",key:"xml",module:xml},{label:"HTTP",key:"http",module:http},{label:"C++",key:"cpp",module:cpp},{label:"Dart",key:"dart",module:dart},{label:"Swift",key:"swift",module:swift},{label:"Kotlin",key:"kotlin",module:kotlin},{label:"Objective C",key:"objectivec",module:objectivec},{label:"Node.js",key:"javascript",module:javascript},{label:"JSON",key:"json",module:json},{label:"DOS",key:"dos",module:dos},{label:"YAML",key:"yaml",module:yaml},{label:"Erlang",key:"erlang",module:erlang},{label:"Elixir",key:"elixir",module:elixir},{label:"Diff",key:"diff",module:diff},{label:"SQL",key:"sql",module:sql},{label:"cURL",key:"curl",module:curl},{label:"HTML",key:"html",module:xml},{label:"XML",key:"xml",module:xml}];export default registry;