DX-1128: docs local design foundation (vendor @ably/ui tokens + reset CSS)

.prettierignore

@@ -5,4 +5,7 @@ src/pages/**/*.md
 examples/**/README.md
 
 # Fixture files should not be formatted by Prettier
-data/onPostBuild/__fixtures__/*.mdx
+data/onPostBuild/__fixtures__/*.mdx
+
+# Vendored @ably/ui design tokens, reset and component CSS (DX-1128) - do not reformat
+src/styles/ui/

src/styles/global.css

@@ -2,12 +2,12 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-@import '@ably/ui/reset/styles.css';
-@import '@ably/ui/core/styles.css';
-@import '@ably/ui/core/Slider/component.css';
-@import '@ably/ui/core/Code/component.css';
-@import '@ably/ui/core/Flash/component.css';
-@import '@ably/ui/core/utils/syntax-highlighter.css';
+@import './ui/reset/styles.css';
+@import './ui/core/styles.css';
+@import './ui/core/Slider/component.css';
+@import './ui/core/Code/component.css';
+@import './ui/core/Flash/component.css';
+@import './ui/core/utils/syntax-highlighter.css';
 
 :root {
   --top-nav-height: 64px;

src/styles/ui/core/Code/component.css

@@ -0,0 +1 @@
+@import "../utils/syntax-highlighter.css";

src/styles/ui/core/Flash/component.css

@@ -0,0 +1,28 @@
+@layer components {
+  .ui-flash {
+    @apply w-full fixed;
+    top: 5.5rem;
+    z-index: calc(var(--stacking-context-page-meganav) - 10);
+    transition: margin-top 200ms;
+  }
+
+  .ui-flash-message {
+    @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-2 opacity-0 relative;
+    transition:
+      opacity 200ms,
+      transform 200ms,
+      height 200ms 200ms,
+      margin-top 200ms 200ms;
+    transform: translateY(-200%) rotateX(-90deg);
+  }
+
+  /* dynamic content inside flash, can't add classes */
+  .ui-flash-text a {
+    @apply underline;
+  }
+
+  .ui-flash-message-enter {
+    @apply opacity-100;
+    transform: translateY(0) rotateX(0);
+  }
+}

src/styles/ui/core/Slider/component.css

@@ -0,0 +1,40 @@
+@layer components {
+  .ui-slider-marker {
+    font-size: 0.5rem;
+    top: -1px;
+
+    @apply leading-none px-1 relative;
+  }
+
+  @keyframes fillAnimation {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+
+  .ui-icon-cta {
+    @apply cursor-pointer overflow-hidden;
+    @apply rounded border-2 border-mid-grey hover:border-active-orange;
+    transition: all 0.4s;
+  }
+
+  @screen sm {
+    .ui-icon-cta-left:hover .ui-icon-cta-holder {
+      transform: translateX(-100%);
+    }
+    .ui-icon-cta-right .ui-icon-cta-holder {
+      transform: translateX(-100%);
+    }
+    .ui-icon-cta-right:hover .ui-icon-cta-holder {
+      transform: translateX(0%);
+    }
+  }
+
+  .ui-icon-cta-holder {
+    @apply w-full h-full;
+    transition: all 0.4s;
+  }
+}

src/styles/ui/core/styles.base.css

@@ -0,0 +1 @@
+@import "./styles/properties.css";

src/styles/ui/core/styles.components.css

@@ -0,0 +1,67 @@
+@import "./styles/utils.css";
+@import "./styles/buttons.css";
+@import "./styles/legacy-buttons.css";
+@import "./styles/dropdowns.css";
+@import "./styles/forms.css";
+@import "./styles/layout.css";
+@import "./styles/shadows.css";
+@import "./styles/text.css";
+
+@layer components {
+  /* 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;
+  }
+
+  .ui-section-spacing {
+    @apply my-20 sm:my-24 md:my-32;
+  }
+
+  /* The *-collapse classes remove the spacing between adjacent .ui-section-spacing classes,
+     in a way that handles margin collapsing as well (hence not an exact opposite) */
+  .ui-section-spacing-collapse,
+  .ui-section-spacing-collapse-full {
+    @apply -my-4 sm:-my-8 md:-my-16 first:-mb-8 sm:first:-mb-16 md:first:-mb-32 last:-mt-8 sm:last:-mt-16 md:last:-mt-32;
+  }
+
+  .ui-section-spacing-collapse-half {
+    @apply -my-2 sm:-my-4 md:-my-8 first:-mb-4 sm:first:-mb-8 md:first:-mb-16 last:-mt-4 sm:last:-mt-8 md:last:-mt-16;
+  }
+
+  .ui-section-spacing-collapse-quarter {
+    @apply -my-1 sm:-my-2 md:-my-4 first:-mb-2 sm:first:-mb-4 md:first:-mb-8 last:-mt-2 sm:last:-mt-4 md:last:-mt-8;
+  }
+
+  .ui-section-spacing-collapse-eighth {
+    @apply -my-0.5 sm:-my-1 md:-my-2 first:-mb-1 sm:first:-mb-2 md:first:-mb-4 last:-mt-1 sm:last:-mt-2 md:last:-mt-4;
+  }
+
+  .ui-content-spacing {
+    @apply my-10 sm:my-12 md:my-16;
+  }
+
+  .ui-divider-spacing {
+    @apply my-5 sm:my-6 md:my-8;
+  }
+
+  .ui-container-padding {
+    @apply px-6 py-10 sm:px-10 sm:py-12 md:p-16;
+  }
+}

src/styles/ui/core/styles.css

@@ -0,0 +1,2 @@
+@import "./styles.base.css";
+@import "./styles.components.css";

src/styles/ui/core/styles/buttons.css

@@ -0,0 +1,133 @@
+@layer components {
+  .ui-button-base {
+    @apply inline-flex rounded justify-center items-center gap-3 text-neutral-000 transition-colors focus-base;
+  }
+
+  .ui-button-lg-base {
+    @apply ui-button-base ui-text-label1 font-bold h-14 px-7 py-[1.0625rem] gap-3 [&>svg]:!w-6 [&>svg]:!h-6;
+  }
+
+  .ui-button-md-base {
+    @apply ui-button-base ui-text-label2 font-bold h-12 px-6 py-[0.8125rem] gap-2.5 [&>svg]:!w-6 [&>svg]:!h-6;
+  }
+
+  .ui-button-sm-base {
+    @apply ui-button-base ui-text-label3 font-bold h-10 px-5 py-2.5 gap-2 [&>svg]:!w-5 [&>svg]:!h-5;
+  }
+
+  .ui-button-xs-base {
+    @apply ui-button-base ui-text-label4 font-bold h-9 px-3 py-[0.5625rem] gap-1.5 [&>svg]:!w-4 [&>svg]:!h-4;
+  }
+
+  .ui-button-disabled-base {
+    @apply disabled:cursor-not-allowed disabled:bg-gui-unavailable disabled:text-gui-unavailable-dark disabled:hover:bg-gui-unavailable;
+  }
+
+  .ui-button-disabled-base-dark {
+    @apply disabled:cursor-not-allowed disabled:bg-gui-unavailable-dark disabled:text-gui-unavailable disabled:hover:bg-gui-unavailable-dark;
+  }
+
+  .ui-button-priority-base {
+    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000 active:text-neutral-000 transition-[background-position] disabled:bg-none ui-button-disabled-base;
+  }
+
+  .ui-theme-dark .ui-button-priority-base {
+    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000 active:text-neutral-000 transition-[background-position] disabled:bg-none ui-button-disabled-base-dark;
+  }
+
+  .ui-button-primary-base {
+    @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1100 active:bg-neutral-1200 active:text-neutral-300 ui-button-disabled-base;
+  }
+
+  .ui-theme-dark .ui-button-primary-base {
+    @apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-200 active:bg-neutral-100 active:text-neutral-1000 ui-button-disabled-base-dark;
+  }
+
+  .ui-button-secondary-base {
+    @apply text-neutral-1300 active:text-neutral-1000 border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 disabled:border-gui-unavailable disabled:text-gui-unavailable;
+  }
+
+  .ui-theme-dark .ui-button-secondary-base {
+    @apply text-neutral-000 active:text-neutral-300 border-neutral-900 hover:border-neutral-700 active:border-neutral-800 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark;
+  }
+
+  .ui-button-priority-lg {
+    @apply ui-button-lg-base ui-button-priority-base;
+  }
+
+  .ui-button-priority {
+    @apply ui-button-md-base ui-button-priority-base;
+  }
+
+  .ui-button-priority-sm {
+    @apply ui-button-sm-base ui-button-priority-base;
+  }
+
+  .ui-button-priority-xs {
+    @apply ui-button-xs-base ui-button-priority-base;
+  }
+
+  .ui-button-primary-lg {
+    @apply ui-button-lg-base ui-button-primary-base;
+  }
+
+  .ui-button-primary {
+    @apply ui-button-md-base ui-button-primary-base;
+  }
+
+  .ui-button-primary-sm {
+    @apply ui-button-sm-base ui-button-primary-base;
+  }
+
+  .ui-button-primary-xs {
+    @apply ui-button-xs-base ui-button-primary-base;
+  }
+
+  .ui-button-secondary-lg {
+    @apply ui-button-lg-base ui-button-secondary-base;
+  }
+
+  .ui-button-secondary {
+    @apply ui-button-md-base ui-button-secondary-base;
+  }
+
+  .ui-button-secondary-sm {
+    @apply ui-button-sm-base ui-button-secondary-base;
+  }
+
+  .ui-button-secondary-xs {
+    @apply ui-button-xs-base ui-button-secondary-base;
+  }
+
+  .ui-button-lg-left-icon {
+    @apply pl-6;
+  }
+
+  .ui-button-left-icon {
+    @apply pl-5;
+  }
+
+  .ui-button-sm-left-icon {
+    @apply pl-[1.125rem];
+  }
+
+  .ui-button-lg-right-icon {
+    @apply pr-6;
+  }
+
+  .ui-button-right-icon {
+    @apply pr-5;
+  }
+
+  .ui-button-sm-right-icon {
+    @apply pr-[1.125rem];
+  }
+
+  .ui-button-disabled {
+    @apply select-none pointer-events-none bg-gui-unavailable text-gui-unavailable-dark hover:bg-gui-unavailable;
+  }
+
+  .ui-theme-dark .ui-button-disabled {
+    @apply select-none pointer-events-none bg-gui-unavailable-dark text-gui-unavailable hover:bg-gui-unavailable-dark;
+  }
+}

src/styles/ui/core/styles/dropdowns.css

@@ -0,0 +1,49 @@
+@layer components {
+  .ui-dropdown-base {
+    @apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-4 pr-14 appearance-none select-none focus-base;
+    @apply bg-no-repeat text-p2 flex font-medium bg-neutral-100 transition-colors;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
+    background-position: center right 16px;
+  }
+
+  .ui-theme-dark .ui-dropdown-base {
+    @apply text-neutral-000 bg-neutral-1200 border-neutral-900 hover:border-neutral-700 active:border-neutral-800;
+  }
+
+  .ui-dropdown-base option:disabled {
+    @apply text-neutral-800;
+  }
+
+  .ui-dropdown {
+    @apply ui-dropdown-base py-3;
+  }
+
+  .ui-dropdown-small {
+    @apply ui-dropdown-base py-2.5 text-[14px];
+  }
+
+  /* Special wrapper styles for overriding default Select2 functionality */
+  .ui-dropdown-select2-wrapper .select2 {
+    @apply !w-full;
+  }
+
+  .ui-dropdown-select2-wrapper .select2-selection {
+    @apply ui-dropdown-small;
+  }
+
+  .ui-dropdown-select2-wrapper .select2-selection--single {
+    @apply !h-auto;
+  }
+
+  .ui-dropdown-select2-wrapper .select2-selection__rendered {
+    @apply !leading-relaxed !px-0;
+  }
+
+  .ui-dropdown-select2-wrapper .select2-selection__arrow {
+    @apply hidden;
+  }
+
+  .ui-dropdown-dark {
+    @apply text-neutral-300 bg-neutral-1200 border-neutral-800;
+  }
+}