@amsterdam/design-system-css 0.1.0

package/src/heading/heading.scss

@@ -0,0 +1,42 @@
+@import "../../utils/calculate-fluid-style";
+
+.amsterdam-heading {
+  break-after: avoid;
+  break-inside: avoid;
+  color: black;
+  font-weight: 800;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
+.amsterdam-heading-1 {
+  font-size: calculate-fluid-style(32, 80);
+  line-height: calculate-fluid-style(35, 80);
+}
+
+.amsterdam-heading-2 {
+  font-size: calculate-fluid-style(28, 56);
+  line-height: calculate-fluid-style(34, 62);
+}
+
+.amsterdam-heading-3 {
+  font-size: calculate-fluid-style(24, 40);
+  line-height: calculate-fluid-style(32, 48);
+}
+
+.amsterdam-heading-4 {
+  font-size: calculate-fluid-style(22, 32);
+  line-height: calculate-fluid-style(31, 38);
+}
+
+.amsterdam-heading-5 {
+  font-size: calculate-fluid-style(18, 24);
+  line-height: calculate-fluid-style(25, 31);
+}
+
+.amsterdam-heading-6 {
+  font-size: calculate-fluid-style(16, 18);
+  line-height: calculate-fluid-style(22, 23);
+}

package/src/icon/icon.scss

@@ -0,0 +1,34 @@
+@import "../../utils/calculate-fluid-style";
+
+.amsterdam-icon {
+  align-items: center;
+  display: inline-flex;
+
+  /* TODO: this height should be provided by the text element its part of? */
+  height: calculate-fluid-style(24, 26);
+
+  /* TODO: 12px is not part of the design system, what should this be? */
+  margin-inline-end: 12px;
+
+  /* Offset icon by 3px, because Amsterdam Sans vertical alignment is off */
+  padding-block-end: 3px;
+}
+
+.amsterdam-icon svg {
+  fill: currentColor;
+}
+
+.amsterdam-icon-small svg {
+  height: 1rem;
+  width: 1rem;
+}
+
+.amsterdam-icon-medium svg {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.amsterdam-icon-large svg {
+  height: 2rem;
+  width: 2rem;
+}

package/src/link/link.scss

@@ -0,0 +1,45 @@
+@import "../../utils/calculate-fluid-style";
+
+.amsterdam-link {
+  color: var(--amsterdam-color-primary-blue);
+  display: inline-flex;
+  font-size: calculate-fluid-style(18, 24);
+  font-weight: 800;
+  line-height: calculate-fluid-style(29, 38);
+  outline-offset: var(--amsterdam-focus-outline-offset);
+  text-decoration: none;
+}
+
+.amsterdam-link:focus,
+.amsterdam-link:hover {
+  outline-offset: var(--amsterdam-focus-outline-offset);
+  text-decoration: underline;
+}
+
+.amsterdam-link-standalone {
+  box-shadow: inset 0 -2px var(--amsterdam-color-primary-blue);
+  font-weight: 400;
+  transition: box-shadow 100ms ease-in-out, color 100ms ease-in-out;
+}
+
+.amsterdam-link-standalone:focus,
+.amsterdam-link-standalone:hover {
+  box-shadow: inset 0 -3px var(--amsterdam-color-primary-blue);
+  text-decoration: none;
+}
+
+.amsterdam-link-inline {
+  color: var(--amsterdam-color-primary-blue);
+  display: inline;
+  font-size: inherit;
+  font-weight: 400;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+.amsterdam-link-inlist {
+  font-size: calculate-fluid-style(16, 18);
+  font-weight: 400;
+  line-height: calculate-fluid-style(24, 26);
+  padding-block: 12px;
+}

package/src/list/list.scss

@@ -0,0 +1,5 @@
+.amsterdam-list {
+  list-style: none;
+  margin-block: 0;
+  padding-inline: 0;
+}

package/src/paragraph/paragraph.scss

@@ -0,0 +1,17 @@
+@import "../../utils/calculate-fluid-style";
+
+.amsterdam-paragraph {
+  font-size: calculate-fluid-style(18, 24);
+  line-height: calculate-fluid-style(29, 38);
+  margin-block: 0;
+}
+
+.amsterdam-paragraph-intro {
+  font-size: calculate-fluid-style(22, 30);
+  line-height: calculate-fluid-style(35, 45);
+}
+
+.amsterdam-paragraph-small {
+  font-size: calculate-fluid-style(16, 18);
+  line-height: calculate-fluid-style(24, 29);
+}

package/src/spacing/spacing.scss

@@ -0,0 +1,60 @@
+@import "../../utils/breakpoint";
+
+$amsterdam-spaces: (
+  "xs": 8px,
+  "s": 16px,
+  "m": 24px,
+  "l": 40px,
+  "xl": 56px,
+  "xxl": 72px,
+);
+$amsterdam-spaces-large: (
+  "xs": 8px,
+  "s": 16px,
+  "m": 24px,
+  "l": 40px,
+  "xl": 80px,
+  "xxl": 120px,
+);
+
+/*
+  utility classes for spacing
+  TODO: currently using :nth-child(n) for higher specificity, find better way to solve this
+*/
+@each $size, $value in $amsterdam-spaces {
+  .amsterdam-space-block-start-#{$size}:nth-child(n) {
+    margin-block-start: $value;
+  }
+  .amsterdam-space-block-end-#{$size}:nth-child(n) {
+    margin-block-end: $value;
+  }
+  .amsterdam-space-inline-start-#{$size}:nth-child(n) {
+    margin-inline-start: $value;
+  }
+  .amsterdam-space-inline-end-#{$size}:nth-child(n) {
+    margin-inline-end: $value;
+  }
+}
+
+@each $size, $value in $amsterdam-spaces-large {
+  .amsterdam-space-block-start-#{$size}--large:nth-child(n) {
+    @media (min-width: $amsterdam-breakpoint) {
+      margin-block-start: $value;
+    }
+  }
+  .amsterdam-space-block-end-#{$size}--large:nth-child(n) {
+    @media (min-width: $amsterdam-breakpoint) {
+      margin-block-end: $value;
+    }
+  }
+  .amsterdam-space-inline-start-#{$size}--large:nth-child(n) {
+    @media (min-width: $amsterdam-breakpoint) {
+      margin-inline-start: $value;
+    }
+  }
+  .amsterdam-space-inline-end-#{$size}--large:nth-child(n) {
+    @media (min-width: $amsterdam-breakpoint) {
+      margin-inline-end: $value;
+    }
+  }
+}

package/utils/breakpoint.scss

@@ -0,0 +1,5 @@
+/*
+  The breakpoint is 820px / 16 = 51.25rems
+  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
+*/
+$amsterdam-breakpoint: 51.25rem;

package/utils/calculate-fluid-style.scss

@@ -0,0 +1,17 @@
+@use "sass:math";
+
+@function calculate-fluid-style($minSizePx, $maxSizePx, $minScreenWidthPx: 320, $maxScreenWidthPx: 1920) {
+  $defaultBaseSize: 16;
+  $minSize: math.div($minSizePx, $defaultBaseSize) * 1rem;
+  $maxSize: math.div($maxSizePx, $defaultBaseSize) * 1rem;
+  $minScreenWidth: math.div($minScreenWidthPx, $defaultBaseSize) * 1rem;
+  $maxScreenWidth: math.div($maxScreenWidthPx, $defaultBaseSize) * 1rem;
+
+  @return clamp(
+    #{$minSize},
+    calc(
+      #{$minSize} + #{math.div($maxSize - $minSize, $maxScreenWidth - $minScreenWidth)} * (100vw - #{$minScreenWidth})
+    ),
+    #{$maxSize}
+  );
+}