feat!: Shorten namespaces in theme and tokens (#1125)

Amsterdam · Mar 12, 2024 · 1c81f3b · 1c81f3b
1 parent cdbfaf7
commit 1c81f3b
Show file tree

Hide file tree

Showing 322 changed files with 2,372 additions and 2,405 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -9,7 +9,7 @@
     "color-function-notation": ["modern"],
     "color-no-invalid-hex": true,
     "comment-no-empty": true,
-    "custom-property-pattern": "^_?(amsterdam|nl|utrecht)-[a-z0-9-]+$",
+    "custom-property-pattern": "^_?(ams|nl|utrecht)-[a-z0-9-]+$",
     "declaration-block-no-duplicate-properties": true,
     "declaration-block-no-redundant-longhand-properties": null,
     "declaration-block-no-shorthand-property-overrides": true,
@@ -33,7 +33,7 @@
     "function-url-quotes": "always",
     "hue-degree-notation": ["number"],
     "keyframe-declaration-no-important": true,
-    "keyframes-name-pattern": "^(amsterdam|nl|utrecht)-[a-z0-9-]+$",
+    "keyframes-name-pattern": "^(ams|nl|utrecht)-[a-z0-9-]+$",
     "length-zero-no-unit": [
       true,
       {
@@ -76,15 +76,15 @@
       }
     ],
     "scss/dollar-variable-pattern": [
-      "^(amsterdam)-[a-z0-9-]+$",
+      "^(ams)-[a-z0-9-]+$",
       {
         "ignore": "local"
       }
     ],
     "scss/operator-no-newline-after": null,
-    "scss/percent-placeholder-pattern": "^(amsterdam|nl|utrecht)-[a-z0-9-]+$",
+    "scss/percent-placeholder-pattern": "^(ams|nl|utrecht)-[a-z0-9-]+$",
     "selector-attribute-quotes": "always",
-    "selector-class-pattern": "^(amsterdam|nl|utrecht)-[a-z0-9_-]+$",
+    "selector-class-pattern": "^(ams|nl|utrecht)-[a-z0-9_-]+$",
     "selector-max-id": [0],
     "selector-pseudo-class-no-unknown": true,
     "selector-pseudo-element-no-unknown": true,

diff --git a/packages/css/README.md b/packages/css/README.md
@@ -17,7 +17,7 @@ Theoretically you can include the components in your HTML page like so, but this
     <link rel="stylesheet" href="node_modules/@amsterdam/design-system-css" />
   </head>
   <body>
-    <p class="amsterdam-paragraph">Hello, world!</p>
+    <p class="ams-paragraph">Hello, world!</p>
   </body>
 </html>
 ```
@@ -32,7 +32,7 @@ export default class ExamplePage extends React.Component {
   render() {
     return (
       <>
-        <p className={btn["amsterdam-paragraph"]}>Hello, world!</p>
+        <p className={btn["ams-paragraph"]}>Hello, world!</p>
       </>
     );
   }

diff --git a/packages/css/documentation/coding-conventions.md b/packages/css/documentation/coding-conventions.md
@@ -11,7 +11,7 @@ This link receives an underline when the user’s pointer hovers over it.
 Still, we define its thickness and offset for the initial state.
 
 ```css
-.amsterdam-link {
+.ams-link {
   text-decoration: none;
   text-decoration-thickness: 2px;
   text-underline-offset: 3px;
@@ -25,7 +25,7 @@ Still, we define its thickness and offset for the initial state.
 ### Do not do this
 
 ```css
-.amsterdam-link {
+.ams-link {
   text-decoration: none;
 
   &:hover {

diff --git a/packages/css/src/common/breakpoint.scss b/packages/css/src/common/breakpoint.scss
@@ -9,7 +9,7 @@
  */
 
 /** The breakpoint at which medium screens start. */
-$amsterdam-breakpoint-medium: 36rem;
+$ams-breakpoint-medium: 36rem;
 
 /** The breakpoint at which wide screens start. */
-$amsterdam-breakpoint-wide: 68rem;
+$ams-breakpoint-wide: 68rem;
diff --git a/packages/css/src/common/hyphenation.scss b/packages/css/src/common/hyphenation.scss
@@ -4,7 +4,7 @@
  */
 
 @mixin hyphenation {
-  hyphenate-limit-chars: var(--amsterdam-hyphenation-hyphenate-limit-chars);
-  hyphens: var(--amsterdam-hyphenation-hyphens);
-  overflow-wrap: var(--amsterdam-hyphenation-overflow-wrap);
+  hyphenate-limit-chars: var(--ams-hyphenation-hyphenate-limit-chars);
+  hyphens: var(--ams-hyphenation-hyphens);
+  overflow-wrap: var(--ams-hyphenation-overflow-wrap);
 }
diff --git a/packages/css/src/common/size.scss b/packages/css/src/common/size.scss
@@ -4,7 +4,7 @@
  */
 
 /** The set of available options for sizing. */
-$amsterdam-sizes: (
+$ams-sizes: (
   "xs": "extra-small",
   "sm": "small",
   "md": "medium",

diff --git a/packages/css/src/components/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-accordion__header {
+.ams-accordion__header {
   display: flex;
   margin-block: 0;
   margin-inline: 0;
@@ -13,27 +13,27 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-accordion__button {
+.ams-accordion__button {
   background-color: transparent;
   border: 0;
-  color: var(--amsterdam-accordion-button-color);
+  color: var(--ams-accordion-button-color);
   cursor: pointer;
   display: flex;
-  font-family: var(--amsterdam-accordion-button-font-family);
-  font-size: var(--amsterdam-accordion-button-font-size);
-  font-weight: var(--amsterdam-accordion-button-font-weight);
+  font-family: var(--ams-accordion-button-font-family);
+  font-size: var(--ams-accordion-button-font-size);
+  font-weight: var(--ams-accordion-button-font-weight);
   justify-content: space-between;
-  line-height: var(--amsterdam-accordion-button-line-height);
-  padding-block: var(--amsterdam-accordion-button-padding-block);
-  padding-inline: var(--amsterdam-accordion-button-padding-inline);
+  line-height: var(--ams-accordion-button-line-height);
+  padding-block: var(--ams-accordion-button-padding-block);
+  padding-inline: var(--ams-accordion-button-padding-inline);
   width: 100%;
 
   &:focus {
-    outline-offset: var(--amsterdam-accordion-button-focus-outline-offset);
+    outline-offset: var(--ams-accordion-button-focus-outline-offset);
   }
 
   &:hover {
-    box-shadow: var(--amsterdam-accordion-button-hover-box-shadow);
+    box-shadow: var(--ams-accordion-button-hover-box-shadow);
   }
 
   svg {
@@ -48,16 +48,16 @@
   @include reset;
 }
 
-.amsterdam-accordion__button[aria-expanded="true"] svg {
+.ams-accordion__button[aria-expanded="true"] svg {
   transform: rotate(180deg);
 }
 
-.amsterdam-accordion__panel {
+.ams-accordion__panel {
   display: none;
-  padding-block: var(--amsterdam-accordion-panel-padding-block);
-  padding-inline: var(--amsterdam-accordion-panel-padding-inline);
+  padding-block: var(--ams-accordion-panel-padding-block);
+  padding-inline: var(--ams-accordion-panel-padding-inline);
 }
 
-.amsterdam-accordion__panel--expanded {
+.ams-accordion__panel--expanded {
   display: block;
 }
diff --git a/packages/css/src/components/alert/alert.scss b/packages/css/src/components/alert/alert.scss
@@ -3,34 +3,34 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-alert {
+.ams-alert {
   align-items: flex-start;
-  border-style: var(--amsterdam-alert-border-style);
-  border-width: var(--amsterdam-alert-border-width);
+  border-style: var(--ams-alert-border-style);
+  border-width: var(--ams-alert-border-width);
   display: flex;
   flex-direction: row;
-  gap: var(--amsterdam-alert-gap);
+  gap: var(--ams-alert-gap);
   justify-content: space-between;
-  padding-block: var(--amsterdam-alert-padding-block);
-  padding-inline: var(--amsterdam-alert-padding-inline);
+  padding-block: var(--ams-alert-padding-block);
+  padding-inline: var(--ams-alert-padding-inline);
 }
 
-.amsterdam-alert__content {
+.ams-alert__content {
   flex: auto;
 }
 
-.amsterdam-alert--error {
-  border-color: var(--amsterdam-alert-error-border-color);
+.ams-alert--error {
+  border-color: var(--ams-alert-error-border-color);
 }
 
-.amsterdam-alert--info {
-  border-color: var(--amsterdam-alert-info-border-color);
+.ams-alert--info {
+  border-color: var(--ams-alert-info-border-color);
 }
 
-.amsterdam-alert--success {
-  border-color: var(--amsterdam-alert-success-border-color);
+.ams-alert--success {
+  border-color: var(--ams-alert-success-border-color);
 }
 
-.amsterdam-alert--warning {
-  border-color: var(--amsterdam-alert-warning-border-color);
+.ams-alert--warning {
+  border-color: var(--ams-alert-warning-border-color);
 }
diff --git a/packages/css/src/components/aspect-ratio/aspect-ratio.scss b/packages/css/src/components/aspect-ratio/aspect-ratio.scss
@@ -3,31 +3,31 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-aspect-ratio {
+.ams-aspect-ratio {
   overflow: hidden;
   position: relative;
 }
 
-.amsterdam-aspect-ratio--x-tall {
-  aspect-ratio: var(--amsterdam-aspect-ratio-x-tall);
+.ams-aspect-ratio--x-tall {
+  aspect-ratio: var(--ams-aspect-ratio-x-tall);
 }
 
-.amsterdam-aspect-ratio--tall {
-  aspect-ratio: var(--amsterdam-aspect-ratio-tall);
+.ams-aspect-ratio--tall {
+  aspect-ratio: var(--ams-aspect-ratio-tall);
 }
 
-.amsterdam-aspect-ratio--square {
-  aspect-ratio: var(--amsterdam-aspect-ratio-square);
+.ams-aspect-ratio--square {
+  aspect-ratio: var(--ams-aspect-ratio-square);
 }
 
-.amsterdam-aspect-ratio--wide {
-  aspect-ratio: var(--amsterdam-aspect-ratio-wide);
+.ams-aspect-ratio--wide {
+  aspect-ratio: var(--ams-aspect-ratio-wide);
 }
 
-.amsterdam-aspect-ratio--x-wide {
-  aspect-ratio: var(--amsterdam-aspect-ratio-x-wide);
+.ams-aspect-ratio--x-wide {
+  aspect-ratio: var(--ams-aspect-ratio-x-wide);
 }
 
-.amsterdam-aspect-ratio--2x-wide {
-  aspect-ratio: var(--amsterdam-aspect-ratio-2x-wide);
+.ams-aspect-ratio--2x-wide {
+  aspect-ratio: var(--ams-aspect-ratio-2x-wide);
 }
diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss
@@ -3,51 +3,51 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-badge {
+.ams-badge {
   display: inline-block;
-  font-family: var(--amsterdam-badge-font-family);
-  font-size: var(--amsterdam-badge-font-size);
-  font-weight: var(--amsterdam-badge-font-weight);
-  line-height: var(--amsterdam-badge-line-height);
-  padding-inline: var(--amsterdam-badge-padding-inline);
+  font-family: var(--ams-badge-font-family);
+  font-size: var(--ams-badge-font-size);
+  font-weight: var(--ams-badge-font-weight);
+  line-height: var(--ams-badge-line-height);
+  padding-inline: var(--ams-badge-padding-inline);
 }
 
-.amsterdam-badge--blue {
-  background-color: var(--amsterdam-badge-blue-background-color);
-  color: var(--amsterdam-badge-blue-color);
+.ams-badge--blue {
+  background-color: var(--ams-badge-blue-background-color);
+  color: var(--ams-badge-blue-color);
 }
 
-.amsterdam-badge--dark-blue {
-  background-color: var(--amsterdam-badge-dark-blue-background-color);
-  color: var(--amsterdam-badge-dark-blue-color);
+.ams-badge--dark-blue {
+  background-color: var(--ams-badge-dark-blue-background-color);
+  color: var(--ams-badge-dark-blue-color);
 }
 
-.amsterdam-badge--dark-green {
-  background-color: var(--amsterdam-badge-dark-green-background-color);
-  color: var(--amsterdam-badge-dark-green-color);
+.ams-badge--dark-green {
+  background-color: var(--ams-badge-dark-green-background-color);
+  color: var(--ams-badge-dark-green-color);
 }
 
-.amsterdam-badge--green {
-  background-color: var(--amsterdam-badge-green-background-color);
-  color: var(--amsterdam-badge-green-color);
+.ams-badge--green {
+  background-color: var(--ams-badge-green-background-color);
+  color: var(--ams-badge-green-color);
 }
 
-.amsterdam-badge--magenta {
-  background-color: var(--amsterdam-badge-magenta-background-color);
-  color: var(--amsterdam-badge-magenta-color);
+.ams-badge--magenta {
+  background-color: var(--ams-badge-magenta-background-color);
+  color: var(--ams-badge-magenta-color);
 }
 
-.amsterdam-badge--orange {
-  background-color: var(--amsterdam-badge-orange-background-color);
-  color: var(--amsterdam-badge-orange-color);
+.ams-badge--orange {
+  background-color: var(--ams-badge-orange-background-color);
+  color: var(--ams-badge-orange-color);
 }
 
-.amsterdam-badge--purple {
-  background-color: var(--amsterdam-badge-purple-background-color);
-  color: var(--amsterdam-badge-purple-color);
+.ams-badge--purple {
+  background-color: var(--ams-badge-purple-background-color);
+  color: var(--ams-badge-purple-color);
 }
 
-.amsterdam-badge--yellow {
-  background-color: var(--amsterdam-badge-yellow-background-color);
-  color: var(--amsterdam-badge-yellow-color);
+.ams-badge--yellow {
+  background-color: var(--ams-badge-yellow-background-color);
+  color: var(--ams-badge-yellow-color);
 }
diff --git a/packages/css/src/components/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss
@@ -12,13 +12,13 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-blockquote {
+.ams-blockquote {
   break-inside: avoid;
-  color: var(--amsterdam-blockquote-color);
-  font-family: var(--amsterdam-blockquote-font-family);
-  font-size: var(--amsterdam-blockquote-font-size);
-  font-weight: var(--amsterdam-blockquote-font-weight);
-  line-height: var(--amsterdam-blockquote-line-height);
+  color: var(--ams-blockquote-color);
+  font-family: var(--ams-blockquote-font-family);
+  font-size: var(--ams-blockquote-font-size);
+  font-weight: var(--ams-blockquote-font-weight);
+  line-height: var(--ams-blockquote-line-height);
   quotes: "“" "”";
 
   &::before {
@@ -33,6 +33,6 @@
   @include reset;
 }
 
-.amsterdam-blockquote--inverse-color {
-  color: var(--amsterdam-blockquote-inverse-color);
+.ams-blockquote--inverse-color {
+  color: var(--ams-blockquote-inverse-color);
 }