introduce cascade layers in website (#1468)

iTwin · Aug 4, 2023 · 4e85ba7 · 4e85ba7
1 parent 0f6794e
commit 4e85ba7
Show file tree

Hide file tree

Showing 35 changed files with 1,521 additions and 1,482 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -49,5 +49,7 @@
     "*.stories.tsx": "${capture}.test.ts"
   },
   "javascript.preferences.importModuleSpecifierEnding": "js",
-  "typescript.preferences.importModuleSpecifierEnding": "js"
+  "typescript.preferences.importModuleSpecifierEnding": "js",
+  "css.validate": false,
+  "scss.validate": false
 }
diff --git a/apps/website/src/components/Card.astro b/apps/website/src/components/Card.astro
@@ -22,51 +22,53 @@ const { url, title, description, image, class: className, ...rest } = Astro.prop
 </li>
 
 <style lang='scss'>
-  .card {
-    position: relative;
-    display: flex;
-    flex: 1 0 20%;
-    flex-direction: column;
-    gap: var(--space-3);
-    padding: var(--space-4);
-    border-radius: var(--border-radius-1);
-    transition: box-shadow var(--transition-speed) ease;
+  @layer components {
+    .card {
+      position: relative;
+      display: flex;
+      flex: 1 0 20%;
+      flex-direction: column;
+      gap: var(--space-3);
+      padding: var(--space-4);
+      border-radius: var(--border-radius-1);
+      transition: box-shadow var(--transition-speed) ease;
 
-    &:where(:hover, :focus-within) {
-      box-shadow: 0 0 10px var(--color-highlight-1), 0 0 20px var(--color-highlight-2);
+      &:where(:hover, :focus-within) {
+        box-shadow: 0 0 10px var(--color-highlight-1), 0 0 20px var(--color-highlight-2);
+      }
     }
-  }
-  a {
-    color: var(--color-text);
-    text-decoration: none;
-
-    &:where(:focus) {
-      outline: none;
+    a {
+      color: var(--color-text);
       text-decoration: none;
-    }
 
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
+      &:where(:focus) {
+        outline: none;
+        text-decoration: none;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+      }
     }
-  }
 
-  .text {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
+    .text {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-3);
 
-    h2 {
-      font-size: var(--type-1);
-    }
-    p {
-      font-size: var(--type-0);
-      color: var(--color-subtext);
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
+      h2 {
+        font-size: var(--type-1);
+      }
+      p {
+        font-size: var(--type-0);
+        color: var(--color-subtext);
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
     }
   }
 </style>
diff --git a/apps/website/src/components/ComponentIcon.astro b/apps/website/src/components/ComponentIcon.astro
@@ -13,76 +13,78 @@ const thumbnail = allThumbnails.find(({ file }) => file.endsWith(`${icon}Thumbna
 {icon ? <thumbnail.default class='component-thumbnail' /> : <svg />}
 
 <style lang='scss'>
-  .component-thumbnail,
-  svg {
-    height: calc(var(--space-6) * 6);
-    width: 100%;
-
-    :global(.main-color) {
-      fill: #fff;
-    }
-
-    :global(.highlight-color) {
-      fill: var(--color-highlight-4);
-    }
-
-    :global(.extra-color) {
-      fill: #e1e1e1;
-    }
-
-    :global(.opacity-background) {
-      opacity: 0.1;
-    }
-
-    :global(.opacity-light) {
-      opacity: 0.2;
-    }
-
-    :global(.opacity-light-medium) {
-      opacity: 0.3;
-    }
+  @layer components {
+    .component-thumbnail,
+    svg {
+      height: calc(var(--space-6) * 6);
+      width: 100%;
+
+      :global(.main-color) {
+        fill: #fff;
+      }
 
-    :global(.opacity-medium) {
-      opacity: 0.4;
-    }
+      :global(.highlight-color) {
+        fill: var(--color-highlight-4);
+      }
 
-    :global(.opacity-heavy) {
-      opacity: 0.5;
-    }
+      :global(.extra-color) {
+        fill: #e1e1e1;
+      }
 
-    :global(.opacity-heavier) {
-      opacity: 0.6;
-    }
+      :global(.opacity-background) {
+        opacity: 0.1;
+      }
 
-    :global(.stroke-line) {
-      fill: none;
-      opacity: 0.4;
-      stroke: #fff;
-      stroke-linecap: round;
-      stroke-miterlimit: 10;
-      stroke-width: 3px;
+      :global(.opacity-light) {
+        opacity: 0.2;
+      }
 
-      &.light {
-        opacity: 0.1;
+      :global(.opacity-light-medium) {
+        opacity: 0.3;
       }
 
-      &.title-line {
-        stroke-width: 4px;
+      :global(.opacity-medium) {
+        opacity: 0.4;
       }
 
-      &.highlight {
-        opacity: 1;
-        stroke: var(--color-highlight-4);
+      :global(.opacity-heavy) {
+        opacity: 0.5;
       }
 
-      &.square-cap {
-        stroke-width: 2px;
-        stroke-linecap: square;
+      :global(.opacity-heavier) {
+        opacity: 0.6;
       }
 
-      &.symbol {
-        stroke-width: 2px;
-        stroke-linejoin: round;
+      :global(.stroke-line) {
+        fill: none;
+        opacity: 0.4;
+        stroke: #fff;
+        stroke-linecap: round;
+        stroke-miterlimit: 10;
+        stroke-width: 3px;
+
+        &.light {
+          opacity: 0.1;
+        }
+
+        &.title-line {
+          stroke-width: 4px;
+        }
+
+        &.highlight {
+          opacity: 1;
+          stroke: var(--color-highlight-4);
+        }
+
+        &.square-cap {
+          stroke-width: 2px;
+          stroke-linecap: square;
+        }
+
+        &.symbol {
+          stroke-width: 2px;
+          stroke-linejoin: round;
+        }
       }
     }
   }

diff --git a/apps/website/src/components/CopyCommandButton.astro b/apps/website/src/components/CopyCommandButton.astro
@@ -48,63 +48,65 @@ const { command } = Astro.props;
 </script>
 
 <style lang='scss'>
-  copy-command-button {
-    position: relative;
-    padding: var(--space-2) var(--space-4);
-    border-radius: var(--border-radius-1);
-    box-shadow: 0 0 1px var(--color-highlight-1), 0 0 10px var(--color-highlight-2);
-    outline: 1px solid transparent;
-    display: flex;
-    gap: var(--space-3);
-    align-items: center;
-    color: var(--color-text);
-    transition: box-shadow var(--transition-speed) ease;
-
-    &:hover {
-      box-shadow: 0 0 10px var(--color-highlight-1), 0 0 20px var(--color-highlight-2);
+  @layer components {
+    copy-command-button {
+      position: relative;
+      padding: var(--space-2) var(--space-4);
+      border-radius: var(--border-radius-1);
+      box-shadow: 0 0 1px var(--color-highlight-1), 0 0 10px var(--color-highlight-2);
+      outline: 1px solid transparent;
+      display: flex;
+      gap: var(--space-3);
+      align-items: center;
+      color: var(--color-text);
+      transition: box-shadow var(--transition-speed) ease;
+
+      &:hover {
+        box-shadow: 0 0 10px var(--color-highlight-1), 0 0 20px var(--color-highlight-2);
+      }
     }
-  }
 
-  [data-icon-name='success'] {
-    display: none;
+    [data-icon-name='success'] {
+      display: none;
 
-    [data-copied='true'] & {
-      display: block;
+      [data-copied='true'] & {
+        display: block;
+      }
     }
-  }
 
-  [data-copied='true'] [data-icon-name='copy'] {
-    display: none;
-  }
-
-  code {
-    letter-spacing: -0.01em;
-    transform: translateY(-0.1ex); // visual adjustment
-  }
-
-  button {
-    display: flex;
-    align-items: center;
-    border: 1px solid transparent;
-    background-color: transparent;
-    padding: 0;
-    cursor: pointer;
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
+    [data-copied='true'] [data-icon-name='copy'] {
+      display: none;
     }
 
-    svg {
-      width: 1rem;
-      height: 1rem;
-      fill: var(--color-subtext);
-      transition: fill var(--transition-speed) ease;
+    code {
+      letter-spacing: -0.01em;
+      transform: translateY(-0.1ex); // visual adjustment
     }
 
-    &:hover svg {
-      fill: var(--color-text);
+    button {
+      display: flex;
+      align-items: center;
+      border: 1px solid transparent;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+      }
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+        fill: var(--color-subtext);
+        transition: fill var(--transition-speed) ease;
+      }
+
+      &:hover svg {
+        fill: var(--color-text);
+      }
     }
   }
 </style>
diff --git a/apps/website/src/components/EditPageLink.astro b/apps/website/src/components/EditPageLink.astro
@@ -18,27 +18,30 @@ if (page === 'components') {
 const repoUrl = 'https://github.com/iTwin/iTwinUI';
 const githubEditUrl = `${repoUrl}/edit/main/apps/website/src/pages/docs/${fileName}`;
 ---
+
 <a href={githubEditUrl} {...rest}>
   <EditIcon aria-hidden='true' />Edit this page on GitHub
 </a>
 
 <style lang='scss'>
-  a {
-    margin-inline-start: auto;
-    text-underline-offset: 0.5ex;
-    text-decoration-thickness: 0.5px;
-    transition: opacity 0.2s;
-    opacity: 0.8;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    :global(svg) {
-      width: 1em;
-      height: 1em;
-      vertical-align: middle;
-      margin-inline-end: var(--space-1);
+  @layer components {
+    a {
+      margin-inline-start: auto;
+      text-underline-offset: 0.5ex;
+      text-decoration-thickness: 0.5px;
+      transition: opacity 0.2s;
+      opacity: 0.8;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      :global(svg) {
+        width: 1em;
+        height: 1em;
+        vertical-align: middle;
+        margin-inline-end: var(--space-1);
+      }
     }
   }
 </style>