@amsterdam/design-system-css 0.4.0 → 0.6.0

package/src/components/text-area/text-area.scss

@@ -0,0 +1,70 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-text-area {
+  border: none;
+  box-shadow: var(--amsterdam-text-area-box-shadow);
+  color: var(--amsterdam-text-area-color);
+  font-family: var(--amsterdam-text-area-font-family);
+  font-size: var(--amsterdam-text-area-font-size);
+  font-weight: var(--amsterdam-text-area-font-weight);
+  line-height: var(--amsterdam-text-area-line-height);
+  max-width: 100%;
+  min-height: var(--amsterdam-text-area-min-height);
+  outline-offset: var(--amsterdam-text-area-outline-offset);
+  padding-block: var(--amsterdam-text-area-padding-block);
+  padding-inline: var(--amsterdam-text-area-padding-inline);
+  touch-action: manipulation;
+  width: 100%;
+
+  @include reset;
+
+  &:hover {
+    box-shadow: var(--amsterdam-text-area-hover-box-shadow);
+  }
+}
+
+.amsterdam-text-area::placeholder {
+  color: var(--amsterdam-text-area-placeholder-color);
+}
+
+.amsterdam-text-area:disabled {
+  background-color: var(--amsterdam-text-area-disabled-background-color);
+  box-shadow: var(--amsterdam-text-area-disabled-box-shadow);
+  color: var(--amsterdam-text-area-disabled-color);
+  cursor: var(--amsterdam-text-area-disabled-cursor);
+}
+
+.amsterdam-text-area:invalid,
+.amsterdam-text-area[aria-invalid="true"] {
+  box-shadow: var(--amsterdam-text-area-invalid-box-shadow);
+
+  &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    box-shadow: var(--amsterdam-text-area-invalid-hover-box-shadow);
+  }
+}
+
+.amsterdam-text-area--resize-none {
+  resize: none;
+}
+
+.amsterdam-text-area--resize-horizontal {
+  resize: inline;
+}
+
+.amsterdam-text-area--resize-vertical {
+  resize: block;
+}
+
+.amsterdam-text-area--cols {
+  width: auto;
+}

package/src/components/text-input/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Text Input
 
 A form field in which a user can enter text.

package/src/components/text-input/text-input.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @mixin reset {
@@ -14,22 +14,17 @@
   box-shadow: var(--amsterdam-text-input-box-shadow);
   color: var(--amsterdam-text-input-color);
   font-family: var(--amsterdam-text-input-font-family);
-  font-size: var(--amsterdam-text-input-spacious-font-size);
+  font-size: var(--amsterdam-text-input-font-size);
   font-weight: var(--amsterdam-text-input-font-weight);
-  line-height: var(--amsterdam-text-input-spacious-line-height);
+  line-height: var(--amsterdam-text-input-line-height);
   outline-offset: var(--amsterdam-text-input-outline-offset);
-  padding-block: 0.5rem;
-  padding-inline: 1rem;
+  padding-block: var(--amsterdam-text-input-padding-block);
+  padding-inline: var(--amsterdam-text-input-padding-inline);
   touch-action: manipulation;
   width: 100%;
 
   @include reset;
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-text-input-compact-font-size);
-    line-height: var(--amsterdam-text-input-compact-line-height);
-  }
-
   &:hover {
     box-shadow: var(--amsterdam-text-input-hover-box-shadow);
   }

package/src/components/top-task-link/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Top Task Link
 
 A prominent navigation element to quickly start a task.
@@ -10,12 +12,12 @@ A prominent navigation element to quickly start a task.
 - Keep both texts concise.
   A title consists of a few words, and the description consists of 1 or 2 short sentences.
   The description should end with a period or another appropriate punctuation mark.
-- For wide windows, place 3 or 4 Top Task Links side by side on the [Grid](?path=/docs/react_layout-grid--docs).
+- For wide windows, place 3 or 4 Top Task Links side by side on the [Grid](/docs/components-layout-grid--docs).
   If you have more Top Task Links, place them in the next row.
   Try to distribute the amount of links on wide windows over rows of 3 or 4 links.
   If this is not possible, leave the last cells of the grid empty.
-- If you have a group of links for which a description is unnecessary or illogical, use a [Link List](?path=/docs/react_navigation-link--docs).
+- If you have a group of links for which a description is unnecessary or illogical, use a [Link List](/docs/components-navigation-link--docs).
 
 ## Relevant WCAG requirements
 
-The Top Task Link is subject to the same requirements as [regular links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs).
+The Top Task Link is subject to the same requirements as [regular links](/docs/components-navigation-link--docs).

package/src/components/top-task-link/top-task-link.scss

@@ -1,8 +1,10 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 .amsterdam-top-task-link {
   break-inside: avoid;
   display: flex;
@@ -20,18 +22,14 @@
 .amsterdam-top-task-link__label {
   color: var(--amsterdam-top-task-link-label-color);
   font-family: var(--amsterdam-top-task-link-label-font-family);
-  font-size: var(--amsterdam-top-task-link-label-spacious-font-size);
+  font-size: var(--amsterdam-top-task-link-label-font-size);
   font-weight: var(--amsterdam-top-task-link-label-font-weight);
   line-height: var(--amsterdam-top-task-link-label-line-height);
   text-decoration-line: var(--amsterdam-top-task-link-label-text-decoration-line);
   text-decoration-thickness: var(--amsterdam-top-task-link-label-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-top-task-link-label-text-underline-offset);
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-top-task-link-label-compact-font-size);
-    line-height: var(--amsterdam-top-task-link-label-compact-line-height);
-  }
-
+  @include hyphenation;
   @include reset;
 }
 
@@ -43,14 +41,9 @@
 .amsterdam-top-task-link__description {
   color: var(--amsterdam-top-task-link-description-color);
   font-family: var(--amsterdam-top-task-link-description-font-family);
-  font-size: var(--amsterdam-top-task-link-description-spacious-font-size);
+  font-size: var(--amsterdam-top-task-link-description-font-size);
   font-weight: var(--amsterdam-top-task-link-description-font-weight);
-  line-height: var(--amsterdam-top-task-link-description-spacious-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-top-task-link-description-compact-font-size);
-    line-height: var(--amsterdam-top-task-link-description-compact-line-height);
-  }
+  line-height: var(--amsterdam-top-task-link-description-line-height);
 
   @include reset;
 }

package/src/components/unordered-list/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Unordered List
 
 A list is a vertical group of related content.

package/src/components/unordered-list/unordered-list.scss

@@ -1,9 +1,9 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
-/** Apply border box sizing, reset whitespace and list styles. */
+/** Apply border box sizing, reset white space and list styles. */
 @mixin reset {
   box-sizing: border-box;
   list-style: none;
@@ -24,9 +24,9 @@
 .amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) {
   color: var(--amsterdam-unordered-list-color);
   font-family: var(--amsterdam-unordered-list-font-family);
-  font-size: var(--amsterdam-unordered-list-spacious-font-size);
+  font-size: var(--amsterdam-unordered-list-font-size);
   font-weight: var(--amsterdam-unordered-list-font-weight);
-  line-height: var(--amsterdam-unordered-list-spacious-line-height);
+  line-height: var(--amsterdam-unordered-list-line-height);
   list-style-type: var(--amsterdam-unordered-list-list-style-type);
 
   /** List items are responsible for indentation and marker positioning. */
@@ -36,6 +36,10 @@
   }
 }
 
+.amsterdam-unordered-list--inverse-color:not(.amsterdam-unordered-list--no-markers) {
+  color: var(--amsterdam-unordered-list-inverse-color);
+}
+
 /** A nested list has a different marker and less indentation for correct alignment. */
 :is(.amsterdam-ordered-list, .amsterdam-unordered-list) .amsterdam-unordered-list {
   list-style-type: var(--amsterdam-unordered-list-unordered-list-list-style-type);
@@ -45,8 +49,3 @@
     padding-inline-start: var(--amsterdam-unordered-list-unordered-list-item-padding-inline-start);
   }
 }
-
-.amsterdam-theme--compact .amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) {
-  font-size: var(--amsterdam-unordered-list-compact-font-size);
-  line-height: var(--amsterdam-unordered-list-compact-line-height);
-}

package/src/components/visually-hidden/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Visually Hidden
 
 Hides content from sighted users but keeps it accessible to non-visual user agents, such as screen readers.

package/src/components/visually-hidden/visually-hidden.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 // Source: https://css-tricks.com/inclusively-hidden/