svelte: Import global styles

Author: Turbo87

svelte/src/lib/css/global.css

@@ -0,0 +1,205 @@
+@import './shared/a11y.css';
+@import './shared/buttons.css';
+@import './shared/forms.css';
+@import './shared/sort-by.css';
+@import './shared/typography.css';
+
+/*
+ * The `normalize.css` file does not use CSS layers, so we need to vendor it
+ * with a layer to ensure it is applied before our global styles.
+ */
+@import './normalize.css';
+
+@layer global {
+  :root {
+    --violet800: hsl(252, 44%, 24%);
+    --grey900: hsl(200, 15%, 19%);
+    --grey700: hsl(200, 11%, 43%);
+    --grey600: hsl(200, 13%, 60%);
+    --grey200: hsl(200, 17%, 96%);
+    --green800: hsl(115, 31%, 31%);
+    --green900: hsl(115, 31%, 21%);
+
+    --orange-50: #fff7ed;
+    --orange-100: #ffedd5;
+    --orange-200: #fed7aa;
+    --orange-300: #fdba74;
+    --orange-400: #fb923c;
+    --orange-500: #f97316;
+    --orange-600: #ea580c;
+    --orange-700: #c2410c;
+    --orange-800: #9a3412;
+    --orange-900: #7c2d12;
+
+    --yellow100: hsl(44, 100%, 90%);
+    --yellow500: hsl(44, 100%, 60%);
+    --yellow700: hsl(44, 67%, 50%);
+    --yellow800: hsl(44, 67%, 20%);
+    --yellow900: hsl(44, 30%, 23%);
+
+    --header-bg-color: light-dark(hsl(115, 31%, 20%), #141413);
+
+    --transition-x-slow: 1000ms;
+    --transition-slow: 500ms;
+    --transition-medium: 250ms;
+    --transition-fast: 150ms;
+    --transition-x-fast: 50ms;
+    --transition-instant: 0ms;
+
+    --font-heading: 'Fira Sans', sans-serif;
+    --font-body: var(--font-heading);
+    --font-monospace:
+      'Fira Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+    --main-color: light-dark(#383838, #f9f7ec);
+    --main-color-light: light-dark(#858585, #a6a6a6);
+    --main-shadow-color: light-dark(var(--green900), hsl(111, 10%, 8%));
+    --main-bg: light-dark(#f9f7ec, hsl(0, 1%, 19%));
+    --main-bg-dark: light-dark(#edebdd, #141413);
+    --gray-border: light-dark(#d5d3cb, #666561);
+    --link-color: light-dark(#00ac5b, #04da75);
+    --link-hover-color: light-dark(#007940, #00f27f);
+
+    --placeholder-bg: hsl(212, 7%, 57%);
+    --placeholder-bg2: hsl(213, 16%, 75%);
+
+    /* see https://utopia.fyi/space/calculator?c=320,14,1.2,1140,18,1.25,5,2,&s=0.75|0.5|0.25|0.125,1.5|2|3|4|6,s-l */
+
+    --space-4xs: clamp(0.13rem, calc(0.13rem + 0vw), 0.13rem);
+    --space-3xs: clamp(0.25rem, calc(0.23rem + 0.12vw), 0.31rem);
+    --space-2xs: clamp(0.44rem, calc(0.39rem + 0.24vw), 0.56rem);
+    --space-xs: clamp(0.69rem, calc(0.61rem + 0.37vw), 0.88rem);
+    --space-s: clamp(0.88rem, calc(0.78rem + 0.49vw), 1.13rem);
+    --space-m: clamp(1.31rem, calc(1.17rem + 0.73vw), 1.69rem);
+    --space-l: clamp(1.75rem, calc(1.55rem + 0.98vw), 2.25rem);
+    --space-xl: clamp(2.63rem, calc(2.33rem + 1.46vw), 3.38rem);
+    --space-2xl: clamp(3.5rem, calc(3.11rem + 1.95vw), 4.5rem);
+    --space-3xl: clamp(5.25rem, calc(4.66rem + 2.93vw), 6.75rem);
+
+    /* One-up pairs */
+    --space-4xs-3xs: clamp(0.13rem, calc(0.05rem + 0.37vw), 0.31rem);
+    --space-3xs-2xs: clamp(0.25rem, calc(0.13rem + 0.61vw), 0.56rem);
+    --space-2xs-xs: clamp(0.44rem, calc(0.27rem + 0.85vw), 0.88rem);
+    --space-xs-s: clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem);
+    --space-s-m: clamp(0.88rem, calc(0.56rem + 1.59vw), 1.69rem);
+    --space-m-l: clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem);
+    --space-l-xl: clamp(1.75rem, calc(1.12rem + 3.17vw), 3.38rem);
+    --space-xl-2xl: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.5rem);
+    --space-2xl-3xl: clamp(3.5rem, calc(2.23rem + 6.34vw), 6.75rem);
+
+    /* Custom pairs */
+    --space-s-l: clamp(0.88rem, calc(0.34rem + 2.68vw), 2.25rem);
+
+    color-scheme: light dark;
+  }
+
+  [data-color-scheme='light'] {
+    color-scheme: light;
+  }
+
+  [data-color-scheme='dark'] {
+    color-scheme: dark;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    margin: 0;
+    scroll-behavior: smooth;
+  }
+
+  body {
+    background-color: var(--header-bg-color);
+    font-family: var(--font-body);
+    font-size: 16px;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: var(--font-heading);
+  }
+
+  h1 {
+    @media only screen and (max-width: 400px) {
+      font-size: 1.5em;
+    }
+  }
+
+  a,
+  .link,
+  .text--link {
+    color: var(--link-color);
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--link-hover-color);
+    }
+  }
+
+  /* Using `:not(...)` here for specificity reasons */
+  a:not([href]) {
+    color: unset;
+    cursor: initial;
+  }
+
+  pre.terminal {
+    background: var(--main-color);
+    color: white;
+    padding: var(--space-s);
+    font-family: var(--font-monospace);
+  }
+
+  abbr[title] {
+    text-decoration: none;
+    border-bottom: 1px dotted;
+  }
+
+  noscript {
+    display: grid;
+    justify-items: center;
+    padding: var(--space-m);
+    color: white;
+  }
+
+  /* see https://github.com/twbs/bootstrap/pull/30269 */
+  ::-webkit-datetime-edit,
+  ::-webkit-datetime-edit-fields-wrapper,
+  ::-webkit-datetime-edit-text,
+  ::-webkit-datetime-edit-minute,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-year-field {
+    padding: 0;
+  }
+
+  ::-webkit-calendar-picker-indicator {
+    font-size: 0.9em;
+  }
+
+  .c-notification__icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .c-notification__content {
+    line-height: 1.5;
+  }
+
+  .width-limit {
+    width: 960px;
+    @media only screen and (max-width: 960px) {
+      width: 100%;
+    }
+  }
+}