@ucalgary-design-system/text-input 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +2 -0
  3. package/index.js +22 -21
  4. package/package.json +3 -3
  5. package/text-input.css +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @ucalgary-design-system/text-input
2
2
 
3
+ ## 1.0.5
4
+
5
+ ### Patch Changes
6
+
7
+ - 4c0950e: Added missing token injector to inject tokens into document head.
8
+ - Updated dependencies [4c0950e]
9
+ - @ucalgary-design-system/core@1.0.5
10
+
11
+ ## 1.0.4
12
+
13
+ ### Patch Changes
14
+
15
+ - fe87dab: Updated externalized dependencies
16
+ - Updated dependencies [fe87dab]
17
+ - @ucalgary-design-system/core@1.0.4
18
+ - @ucalgary-design-system/tokens@1.0.4
19
+
3
20
  ## 1.0.3
4
21
 
5
22
  ### Patch Changes
package/README.md CHANGED
@@ -24,6 +24,8 @@ Use the component in your HTML:
24
24
  <ucds-text-input></ucds-text-input>
25
25
  ```
26
26
 
27
+ > 💡 Our components automatically load global design tokens when first used. You don’t need to import them manually!
28
+
27
29
  ## Development
28
30
 
29
31
  Build the component:
package/index.js CHANGED
@@ -1,12 +1,12 @@
1
- import { unsafeCSS as O, nothing as m, html as y } from "lit";
2
- import { BaseElement as U } from "@ucalgary-design-system/core";
1
+ import { BaseElement as U, injectGlobalTokens as O } from "@ucalgary-design-system/core";
2
+ import { unsafeCSS as A, nothing as m, html as y } from "lit";
3
3
  import "@ucalgary-design-system/helper-components";
4
4
  /**
5
5
  * @license
6
6
  * Copyright 2017 Google LLC
7
7
  * SPDX-License-Identifier: BSD-3-Clause
8
8
  */
9
- const A = (i) => (t, e) => {
9
+ const T = (i) => (t, e) => {
10
10
  e !== void 0 ? e.addInitializer(() => {
11
11
  customElements.define(i, t);
12
12
  }) : customElements.define(i, t);
@@ -17,7 +17,7 @@ const A = (i) => (t, e) => {
17
17
  * SPDX-License-Identifier: BSD-3-Clause
18
18
  */
19
19
  const b = globalThis, g = b.ShadowRoot && (b.ShadyCSS === void 0 || b.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, C = Symbol(), S = /* @__PURE__ */ new WeakMap();
20
- let T = class {
20
+ let k = class {
21
21
  constructor(t, e, r) {
22
22
  if (this._$cssResult$ = !0, r !== C) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
23
23
  this.cssText = t, this.t = e;
@@ -35,7 +35,7 @@ let T = class {
35
35
  return this.cssText;
36
36
  }
37
37
  };
38
- const M = (i) => new T(typeof i == "string" ? i : i + "", void 0, C), k = (i, t) => {
38
+ const M = (i) => new k(typeof i == "string" ? i : i + "", void 0, C), R = (i, t) => {
39
39
  if (g) i.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
40
40
  else for (const e of t) {
41
41
  const r = document.createElement("style"), s = b.litNonce;
@@ -51,10 +51,10 @@ const M = (i) => new T(typeof i == "string" ? i : i + "", void 0, C), k = (i, t)
51
51
  * Copyright 2017 Google LLC
52
52
  * SPDX-License-Identifier: BSD-3-Clause
53
53
  */
54
- const { is: R, defineProperty: q, getOwnPropertyDescriptor: z, getOwnPropertyNames: j, getOwnPropertySymbols: D, getPrototypeOf: I } = Object, c = globalThis, P = c.trustedTypes, L = P ? P.emptyScript : "", v = c.reactiveElementPolyfillSupport, f = (i, t) => i, $ = { toAttribute(i, t) {
54
+ const { is: q, defineProperty: z, getOwnPropertyDescriptor: j, getOwnPropertyNames: D, getOwnPropertySymbols: I, getPrototypeOf: L } = Object, c = globalThis, P = c.trustedTypes, B = P ? P.emptyScript : "", v = c.reactiveElementPolyfillSupport, f = (i, t) => i, $ = { toAttribute(i, t) {
55
55
  switch (t) {
56
56
  case Boolean:
57
- i = i ? L : null;
57
+ i = i ? B : null;
58
58
  break;
59
59
  case Object:
60
60
  case Array:
@@ -79,7 +79,7 @@ const { is: R, defineProperty: q, getOwnPropertyDescriptor: z, getOwnPropertyNam
79
79
  }
80
80
  }
81
81
  return e;
82
- } }, _ = (i, t) => !R(i, t), x = { attribute: !0, type: String, converter: $, reflect: !1, useDefault: !1, hasChanged: _ };
82
+ } }, _ = (i, t) => !q(i, t), x = { attribute: !0, type: String, converter: $, reflect: !1, useDefault: !1, hasChanged: _ };
83
83
  Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), c.litPropertyMetadata ?? (c.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
84
84
  class u extends HTMLElement {
85
85
  static addInitializer(t) {
@@ -91,11 +91,11 @@ class u extends HTMLElement {
91
91
  static createProperty(t, e = x) {
92
92
  if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
93
93
  const r = Symbol(), s = this.getPropertyDescriptor(t, r, e);
94
- s !== void 0 && q(this.prototype, t, s);
94
+ s !== void 0 && z(this.prototype, t, s);
95
95
  }
96
96
  }
97
97
  static getPropertyDescriptor(t, e, r) {
98
- const { get: s, set: o } = z(this.prototype, t) ?? { get() {
98
+ const { get: s, set: o } = j(this.prototype, t) ?? { get() {
99
99
  return this[e];
100
100
  }, set(a) {
101
101
  this[e] = a;
@@ -110,13 +110,13 @@ class u extends HTMLElement {
110
110
  }
111
111
  static _$Ei() {
112
112
  if (this.hasOwnProperty(f("elementProperties"))) return;
113
- const t = I(this);
113
+ const t = L(this);
114
114
  t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
115
115
  }
116
116
  static finalize() {
117
117
  if (this.hasOwnProperty(f("finalized"))) return;
118
118
  if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(f("properties"))) {
119
- const e = this.properties, r = [...j(e), ...D(e)];
119
+ const e = this.properties, r = [...D(e), ...I(e)];
120
120
  for (const s of r) this.createProperty(s, e[s]);
121
121
  }
122
122
  const t = this[Symbol.metadata];
@@ -165,7 +165,7 @@ class u extends HTMLElement {
165
165
  }
166
166
  createRenderRoot() {
167
167
  const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
168
- return k(t, this.constructor.elementStyles), t;
168
+ return R(t, this.constructor.elementStyles), t;
169
169
  }
170
170
  connectedCallback() {
171
171
  var t;
@@ -290,7 +290,7 @@ u.elementStyles = [], u.shadowRootOptions = { mode: "open" }, u[f("elementProper
290
290
  * Copyright 2017 Google LLC
291
291
  * SPDX-License-Identifier: BSD-3-Clause
292
292
  */
293
- const B = { attribute: !0, type: String, converter: $, reflect: !1, hasChanged: _ }, N = (i = B, t, e) => {
293
+ const N = { attribute: !0, type: String, converter: $, reflect: !1, hasChanged: _ }, V = (i = N, t, e) => {
294
294
  const { kind: r, metadata: s } = e;
295
295
  let o = globalThis.litPropertyMetadata.get(s);
296
296
  if (o === void 0 && globalThis.litPropertyMetadata.set(s, o = /* @__PURE__ */ new Map()), r === "setter" && ((i = Object.create(i)).wrapped = !0), o.set(e.name, i), r === "accessor") {
@@ -312,16 +312,16 @@ const B = { attribute: !0, type: String, converter: $, reflect: !1, hasChanged:
312
312
  throw Error("Unsupported decorator location: " + r);
313
313
  };
314
314
  function p(i) {
315
- return (t, e) => typeof e == "object" ? N(i, t, e) : ((r, s, o) => {
315
+ return (t, e) => typeof e == "object" ? V(i, t, e) : ((r, s, o) => {
316
316
  const a = s.hasOwnProperty(o);
317
317
  return s.constructor.createProperty(o, r), a ? Object.getOwnPropertyDescriptor(s, o) : void 0;
318
318
  })(i, t, e);
319
319
  }
320
- const V = ":host{display:block}.form-text{display:flex;flex-direction:column;gap:var(--ucds-form-component-intra-spacing);align-items:start;max-width:var(--ucds-form-element-maxwidth)}.form-text input{display:block;height:var(--ucds-form-element-height);width:var(--ucds-form-element-width);padding-left:var(--ucds-form-element-horizontal-padding);padding-right:var(--ucds-form-element-horizontal-padding);line-height:16px;background-color:var(--ucds-color-forms-input-background-rest);border:var(--ucds-form-element-border-width) solid var(--ucds-color-forms-input-border-rest);border-radius:var(--ucds-form-element-border-radius);transition:border-color .5s ease;text-align:left}.form-text input::-moz-placeholder{font-style:italic;color:var(--ucds-color-text-secondary)}.form-text input::placeholder{font-style:italic;color:var(--ucds-color-text-secondary)}.form-text input[error]{background-color:var(--ucds-color-feedback-error-background-light);border-color:var(--ucds-color-feedback-error-light)}.form-text input:hover{border-color:var(--ucds-color-forms-input-border-hover)}.form-text input:focus{outline:var(--ucds-color-action-focus) 2px solid;outline-offset:2px}.form-text.disabled input{color:var(--ucds-color-text-disabled);background-color:transparent;border-color:var(--ucds-color-forms-input-border-disabled)}.form-text.disabled input::-moz-placeholder{color:var(--ucds-color-text-disabled)}.form-text.disabled input::placeholder{color:var(--ucds-color-text-disabled)}";
321
- var J = Object.defineProperty, K = Object.getOwnPropertyDescriptor, h = (i, t, e, r) => {
322
- for (var s = r > 1 ? void 0 : r ? K(t, e) : t, o = i.length - 1, a; o >= 0; o--)
320
+ const J = ":host{display:block}.form-text{display:flex;flex-direction:column;gap:var(--ucds-form-component-intra-spacing);align-items:start;max-width:var(--ucds-form-element-maxwidth)}.form-text input{display:block;height:var(--ucds-form-element-height);width:var(--ucds-form-element-width);padding-left:var(--ucds-form-element-horizontal-padding);padding-right:var(--ucds-form-element-horizontal-padding);line-height:16px;background-color:var(--ucds-color-forms-input-background-rest);border:var(--ucds-form-element-border-width) solid var(--ucds-color-forms-input-border-rest);border-radius:var(--ucds-form-element-border-radius);transition:border-color .5s ease;text-align:left}.form-text input::-moz-placeholder{font-style:italic;color:var(--ucds-color-text-secondary)}.form-text input::placeholder{font-style:italic;color:var(--ucds-color-text-secondary)}.form-text input[error]{background-color:var(--ucds-color-feedback-error-background-light);border-color:var(--ucds-color-feedback-error-light)}.form-text input:hover{border-color:var(--ucds-color-forms-input-border-hover)}.form-text input:focus{outline:var(--ucds-color-action-focus) 2px solid;outline-offset:2px}.form-text.disabled input{color:var(--ucds-color-text-disabled);background-color:transparent;border-color:var(--ucds-color-forms-input-border-disabled)}.form-text.disabled input::-moz-placeholder{color:var(--ucds-color-text-disabled)}.form-text.disabled input::placeholder{color:var(--ucds-color-text-disabled)}";
321
+ var K = Object.defineProperty, W = Object.getOwnPropertyDescriptor, h = (i, t, e, r) => {
322
+ for (var s = r > 1 ? void 0 : r ? W(t, e) : t, o = i.length - 1, a; o >= 0; o--)
323
323
  (a = i[o]) && (s = (r ? a(t, e, s) : a(s)) || s);
324
- return r && s && J(t, e, s), s;
324
+ return r && s && K(t, e, s), s;
325
325
  };
326
326
  let l = class extends U {
327
327
  constructor() {
@@ -374,7 +374,7 @@ let l = class extends U {
374
374
  };
375
375
  l.styles = [
376
376
  U.styles,
377
- O(V)
377
+ A(J)
378
378
  ];
379
379
  l.formAssociated = !0;
380
380
  h([
@@ -402,8 +402,9 @@ h([
402
402
  p({ type: Boolean, reflect: !0 })
403
403
  ], l.prototype, "required", 2);
404
404
  l = h([
405
- A("ucds-text-input")
405
+ T("ucds-text-input")
406
406
  ], l);
407
+ O();
407
408
  export {
408
409
  l as TextInput
409
410
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ucalgary-design-system/text-input",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -11,9 +11,9 @@
11
11
  }
12
12
  },
13
13
  "peerDependencies": {
14
- "@ucalgary-design-system/core": "^1.0.3",
14
+ "@ucalgary-design-system/core": "^1.0.5",
15
15
  "@ucalgary-design-system/helper-components": "^1.0.2",
16
- "@ucalgary-design-system/tokens": "^1.0.3",
16
+ "@ucalgary-design-system/tokens": "^1.0.4",
17
17
  "lit": "^3.2.1"
18
18
  },
19
19
  "description": "A web component for TextInput",
package/text-input.css DELETED
@@ -1 +0,0 @@
1
- :root{--ucds-color-palette-brand-red: #d6001c;--ucds-color-palette-brand-gold: #ffcd00;--ucds-color-palette-brand-light-orange: #ffa300;--ucds-color-palette-brand-dark-orange: #ff671f;--ucds-color-palette-brand-rubine: #ce0058;--ucds-color-palette-brand-berry: #9c0534;--ucds-color-palette-brand-brown: #6b3529;--ucds-color-palette-brand-teal: #47a67c;--ucds-color-palette-black: #000000;--ucds-color-palette-gray-100: #2d2d2d;--ucds-color-palette-gray-200: #3d3d3d;--ucds-color-palette-gray-250: #4d4d4d;--ucds-color-palette-gray-300: #5d5d5d;--ucds-color-palette-gray-400: #8d8d8d;--ucds-color-palette-gray-500: #adadad;--ucds-color-palette-gray-600: #c0c0c0;--ucds-color-palette-gray-700: #d8d8d8;--ucds-color-palette-gray-800: #e5e5e5;--ucds-color-palette-gray-900: #f4f4f4;--ucds-color-palette-white: #ffffff;--ucds-color-palette-red-100: #3d0910;--ucds-color-palette-red-200: #5c0e18;--ucds-color-palette-red-300: #7a111f;--ucds-color-palette-red-400: #991022;--ucds-color-palette-red-500: #b70b21;--ucds-color-palette-red-600: #d6001c;--ucds-color-palette-red-700: #df3047;--ucds-color-palette-red-800: #ee0e2c;--ucds-color-palette-red-900: #ffadad;--ucds-color-palette-light-orange-200: #614e00;--ucds-color-palette-light-orange-600: #ffa300;--ucds-color-palette-light-orange-900: #fff6e7;--ucds-color-palette-dark-orange-200: #6b3529;--ucds-color-palette-dark-orange-600: #ff671f;--ucds-color-palette-dark-orange-900: #fff2e9;--ucds-color-palette-rubine-600: #ce0058;--ucds-color-palette-rubine-800: #ed0a72;--ucds-color-palette-rubine-900: #ffa3c9;--ucds-color-palette-berry-600: #9c0534;--ucds-color-palette-berry-700: #a6192e;--ucds-color-palette-berry-800: #ea7b8a;--ucds-color-palette-berry-900: #f6ebed;--ucds-color-palette-brown-600: #6b3529;--ucds-color-palette-brown-900: #ca7d68;--ucds-color-palette-teal-600: #47a67c;--ucds-color-palette-teal-900: #f4faf7;--ucds-color-accent-gray-tint-background: #f4f4f4;--ucds-color-accent-gray-tint-icon: #8d8d8d;--ucds-color-accent-red-background: #d6001c;--ucds-color-accent-red-icon: #ffadad;--ucds-color-accent-light-orange-background: #ffa300;--ucds-color-accent-light-orange-icon: #614e00;--ucds-color-accent-light-orange-tint-background: #fff6e7;--ucds-color-accent-light-orange-tint-icon: #ffa300;--ucds-color-accent-dark-orange-background: #ff671f;--ucds-color-accent-dark-orange-icon: #6b3529;--ucds-color-accent-dark-orange-tint-background: #fff2e9;--ucds-color-accent-dark-orange-tint-icon: #ff671f;--ucds-color-accent-rubine-background: #ce0058;--ucds-color-accent-rubine-icon: #ffa3c9;--ucds-color-accent-berry-background: #9c0534;--ucds-color-accent-berry-icon: #ea7b8a;--ucds-color-accent-berry-tint-background: #f6ebed;--ucds-color-accent-berry-tint-icon: #9c0534;--ucds-color-accent-brown-background: #6b3529;--ucds-color-accent-brown-icon: #ca7d68;--ucds-color-accent-teal-tint-background: #f4faf7;--ucds-color-accent-teal-tint-icon: #47a67c;--ucds-color-accent-taupe-tint-background: #fbf8f5;--ucds-color-accent-taupe-tint-icon: #d3ac8b;--ucds-color-surface-page: #ffffff;--ucds-color-surface-primary: #ffffff;--ucds-color-border-neutral: #8d8d8d;--ucds-color-text-primary: #2d2d2d;--ucds-color-text-primary-inverse: #ffffff;--ucds-color-text-secondary: #5d5d5d;--ucds-color-text-disabled: #e5e5e5;--ucds-color-icon-primary: #2d2d2d;--ucds-color-icon-primary-inverse: #ffffff;--ucds-color-forms-input-background-rest: #ffffff;--ucds-color-forms-input-background-hover: #9c0534;--ucds-color-forms-input-background-active: #9c0534;--ucds-color-forms-input-background-selected: #9c0534;--ucds-color-forms-input-background-disabled: #e5e5e5;--ucds-color-forms-input-border-rest: #8d8d8d;--ucds-color-forms-input-border-hover: #3d3d3d;--ucds-color-forms-input-border-active: #3d3d3d;--ucds-color-forms-input-border-selected: #9c0534;--ucds-color-forms-input-border-disabled: #e5e5e5;--ucds-color-forms-input-element-disabled: #f4f4f4;--ucds-color-action-rest: #d6001c;--ucds-color-action-hover: #991022;--ucds-color-action-active: #991022;--ucds-color-action-focus: #4d4d4d;--ucds-color-action-visited: #991022;--ucds-color-action-selected: #9c0534;--ucds-color-action-secondary-rest: #2d2d2d;--ucds-color-action-secondary-hover: #4d4d4d;--ucds-color-action-secondary-active: #4d4d4d;--ucds-color-action-secondary-focus: #4d4d4d;--ucds-color-action-inverse-rest: #ffffff;--ucds-color-action-inverse-hover: #e5e5e5;--ucds-color-action-inverse-active: #e5e5e5;--ucds-color-action-inverse-focus: #ffffff;--ucds-color-feedback-error-light: #df3047;--ucds-color-feedback-error-background-light: rgb(255 173 173 / 50%);--ucds-font-base-size: 16px;--ucds-font-base-line-height: 24px;--ucds-font-family-sans-serif: "Proxima Nova", Arial, Helvetica, sans-serif;--ucds-font-family-serif: "Museo Slab", "Proxima Nova", Arial, Helvetica, sans-serif;--ucds-font-weight-regular: 400;--ucds-font-weight-medium: 500;--ucds-font-weight-semibold: 600;--ucds-font-weight-bold: 700;--ucds-font-paragraph-spacing: 16px;--ucds-font-letter-spacing-eyebrow: 2px;--ucds-responsive-spacing-gap-default-desktop: 32px;--ucds-responsive-spacing-gap-default-tablet: 32px;--ucds-responsive-spacing-gap-default-mobile: 24px;--ucds-responsive-spacing-gap-section-desktop: 64px;--ucds-responsive-spacing-gap-section-tablet: 64px;--ucds-responsive-spacing-gap-section-mobile: 48px;--ucds-responsive-spacing-gap-container-desktop: 48px;--ucds-responsive-spacing-gap-container-tablet: 48px;--ucds-responsive-spacing-gap-container-mobile: 32px;--ucds-responsive-spacing-gap-h1h2-paragraph-desktop: 16px;--ucds-responsive-spacing-gap-h1h2-paragraph-tablet: 16px;--ucds-responsive-spacing-gap-h1h2-paragraph-mobile: 8px;--ucds-responsive-spacing-gap-h3h4-paragraph-desktop: 8px;--ucds-responsive-spacing-gap-h3h4-paragraph-tablet: 8px;--ucds-responsive-spacing-gap-h3h4-paragraph-mobile: 8px;--ucds-responsive-typography-font-size-display-level-0-desktop: 56px;--ucds-responsive-typography-font-size-display-level-0-tablet: 56px;--ucds-responsive-typography-font-size-display-level-0-mobile: 48px;--ucds-responsive-typography-font-size-display-level-1-desktop: 48px;--ucds-responsive-typography-font-size-display-level-1-tablet: 48px;--ucds-responsive-typography-font-size-display-level-1-mobile: 40px;--ucds-responsive-typography-font-size-display-level-2-desktop: 36px;--ucds-responsive-typography-font-size-display-level-2-tablet: 36px;--ucds-responsive-typography-font-size-display-level-2-mobile: 32px;--ucds-responsive-typography-font-size-heading-level-1-desktop: 48px;--ucds-responsive-typography-font-size-heading-level-1-tablet: 48px;--ucds-responsive-typography-font-size-heading-level-1-mobile: 40px;--ucds-responsive-typography-font-size-heading-level-2-desktop: 36px;--ucds-responsive-typography-font-size-heading-level-2-tablet: 36px;--ucds-responsive-typography-font-size-heading-level-2-mobile: 32px;--ucds-responsive-typography-font-size-heading-level-3-desktop: 28px;--ucds-responsive-typography-font-size-heading-level-3-tablet: 28px;--ucds-responsive-typography-font-size-heading-level-3-mobile: 24px;--ucds-responsive-typography-font-size-heading-level-4-desktop: 24px;--ucds-responsive-typography-font-size-heading-level-4-tablet: 24px;--ucds-responsive-typography-font-size-heading-level-4-mobile: 20px;--ucds-responsive-typography-font-size-title-desktop: 20px;--ucds-responsive-typography-font-size-title-tablet: 20px;--ucds-responsive-typography-font-size-title-mobile: 18px;--ucds-responsive-typography-font-size-body-large-desktop: 20px;--ucds-responsive-typography-font-size-body-large-tablet: 20px;--ucds-responsive-typography-font-size-body-large-mobile: 18px;--ucds-responsive-typography-font-size-body-medium-desktop: 16px;--ucds-responsive-typography-font-size-body-medium-tablet: 16px;--ucds-responsive-typography-font-size-body-medium-mobile: 16px;--ucds-responsive-typography-font-size-body-small-desktop: 14px;--ucds-responsive-typography-font-size-body-small-tablet: 14px;--ucds-responsive-typography-font-size-body-small-mobile: 14px;--ucds-responsive-typography-font-size-micro-desktop: 12px;--ucds-responsive-typography-font-size-micro-tablet: 12px;--ucds-responsive-typography-font-size-micro-mobile: 12px;--ucds-responsive-typography-line-height-display-level-0-desktop: 64px;--ucds-responsive-typography-line-height-display-level-0-tablet: 64px;--ucds-responsive-typography-line-height-display-level-0-mobile: 56px;--ucds-responsive-typography-line-height-display-level-1-desktop: 56px;--ucds-responsive-typography-line-height-display-level-1-tablet: 56px;--ucds-responsive-typography-line-height-display-level-1-mobile: 48px;--ucds-responsive-typography-line-height-display-level-2-desktop: 48px;--ucds-responsive-typography-line-height-display-level-2-tablet: 48px;--ucds-responsive-typography-line-height-display-level-2-mobile: 40px;--ucds-responsive-typography-line-height-heading-level-1-desktop: 56px;--ucds-responsive-typography-line-height-heading-level-1-tablet: 56px;--ucds-responsive-typography-line-height-heading-level-1-mobile: 48px;--ucds-responsive-typography-line-height-heading-level-2-desktop: 48px;--ucds-responsive-typography-line-height-heading-level-2-tablet: 48px;--ucds-responsive-typography-line-height-heading-level-2-mobile: 40px;--ucds-responsive-typography-line-height-heading-level-3-desktop: 32px;--ucds-responsive-typography-line-height-heading-level-3-tablet: 32px;--ucds-responsive-typography-line-height-heading-level-3-mobile: 28px;--ucds-responsive-typography-line-height-heading-level-4-desktop: 28px;--ucds-responsive-typography-line-height-heading-level-4-tablet: 28px;--ucds-responsive-typography-line-height-heading-level-4-mobile: 28px;--ucds-responsive-typography-line-height-title-desktop: 28px;--ucds-responsive-typography-line-height-title-tablet: 28px;--ucds-responsive-typography-line-height-title-mobile: 28px;--ucds-responsive-typography-line-height-body-large-desktop: 28px;--ucds-responsive-typography-line-height-body-large-tablet: 28px;--ucds-responsive-typography-line-height-body-large-mobile: 24px;--ucds-responsive-typography-line-height-body-medium-desktop: 24px;--ucds-responsive-typography-line-height-body-medium-tablet: 24px;--ucds-responsive-typography-line-height-body-medium-mobile: 24px;--ucds-responsive-typography-line-height-body-small-desktop: 20px;--ucds-responsive-typography-line-height-body-small-tablet: 20px;--ucds-responsive-typography-line-height-body-small-mobile: 20px;--ucds-responsive-typography-line-height-micro-desktop: 16px;--ucds-responsive-typography-line-height-micro-tablet: 16px;--ucds-responsive-typography-line-height-micro-mobile: 16px;--ucds-shape-border-radius: 8px;--ucds-shape-border-width: 2px;--ucds-shape-border-focus-radius: 10px;--ucds-shape-border-focus-width: 2px;--ucds-form-element-border-radius: 8px;--ucds-form-element-border-width: 2px;--ucds-form-element-height: 48px;--ucds-form-element-width: 100%;--ucds-form-element-maxwidth: 555px;--ucds-form-element-horizontal-padding: 16px;--ucds-form-component-intra-spacing: 8px;--ucds-form-component-inter-spacing: 16px}