@canonical/launchpad-design-tokens 1.0.0

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 (15) hide show
  1. package/README.md +115 -0
  2. package/dist/css/color/dark.css +63 -0
  3. package/dist/css/color/light.css +63 -0
  4. package/dist/css/color/system.css +132 -0
  5. package/dist/css/dimension/extraWide.css +24 -0
  6. package/dist/css/dimension/medium.css +24 -0
  7. package/dist/css/dimension/narrow.css +24 -0
  8. package/dist/css/dimension/responsive.css +108 -0
  9. package/dist/css/dimension/wide.css +24 -0
  10. package/dist/css/typography/extraWide.css +26 -0
  11. package/dist/css/typography/medium.css +26 -0
  12. package/dist/css/typography/narrow.css +26 -0
  13. package/dist/css/typography/responsive.css +116 -0
  14. package/dist/css/typography/wide.css +26 -0
  15. package/package.json +38 -0
package/README.md ADDED
@@ -0,0 +1,115 @@
1
+ # @canonical/launchpad-design-tokens
2
+
3
+ Design tokens for Canonical's Launchpad, providing consistent styling across the platform. This package generates CSS custom properties and Figma tokens from a centralized token system.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @canonical/launchpad-design-tokens
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ### CSS Tokens
14
+
15
+ The package provides CSS files with custom properties for different categories:
16
+
17
+ #### Colors
18
+
19
+ - `dist/css/color/light.css` - Light mode colors
20
+ - `dist/css/color/dark.css` - Dark mode colors
21
+ - `dist/css/color/system.css` - System preference based colors
22
+
23
+ #### Typography
24
+
25
+ - `dist/css/typography/narrow.css` - Typography for narrow screens
26
+ - `dist/css/typography/medium.css` - Typography for medium screens
27
+ - `dist/css/typography/wide.css` - Typography for wide screens
28
+ - `dist/css/typography/extraWide.css` - Typography for extra wide screens
29
+ - `dist/css/typography/responsive.css` - Responsive typography system
30
+
31
+ #### Dimensions
32
+
33
+ - `dist/css/dimension/narrow.css` - Dimensions for narrow screens
34
+ - `dist/css/dimension/medium.css` - Dimensions for medium screens
35
+ - `dist/css/dimension/wide.css` - Dimensions for wide screens
36
+ - `dist/css/dimension/extraWide.css` - Dimensions for extra wide screens
37
+ - `dist/css/dimension/responsive.css` - Responsive dimension system
38
+
39
+ ### Figma Tokens
40
+
41
+ Figma-compatible token files are available in `dist/figma/` with the same structure as CSS tokens, plus manifest files for easy import.
42
+
43
+ ## Development
44
+
45
+ ### Prerequisites
46
+
47
+ - [Bun](https://bun.sh) - JavaScript runtime and package manager
48
+
49
+ ### Setup
50
+
51
+ ```bash
52
+ bun install
53
+ ```
54
+
55
+ ### Available Scripts
56
+
57
+ ```bash
58
+ # Build all tokens
59
+ bun run build
60
+
61
+ # Build specific categories
62
+ bun run build:color
63
+ bun run build:typography
64
+ bun run build:dimension
65
+
66
+ # Run linting and type checking
67
+ bun run check
68
+
69
+ # Fix linting issues
70
+ bun run check:fix
71
+ ```
72
+
73
+ ### Project Structure
74
+
75
+ ```
76
+ src/
77
+ ├── tokens/
78
+ │ ├── primitives/ # Base token values
79
+ │ └── semantic/ # Semantic token definitions
80
+ │ ├── color/
81
+ │ ├── typography/
82
+ │ └── dimension/
83
+ └── build/ # Build scripts
84
+ ├── color.ts
85
+ ├── typography.ts
86
+ └── dimension.ts
87
+ ```
88
+
89
+ ## Token Categories
90
+
91
+ ### Colors
92
+
93
+ - Light and dark mode support
94
+ - System preference detection
95
+ - Semantic color names for consistent theming
96
+
97
+ ### Typography
98
+
99
+ - Responsive font sizes and line heights
100
+ - Breakpoint-specific typography scales
101
+ - Consistent font family definitions
102
+
103
+ ### Dimensions
104
+
105
+ - Spacing and layout dimensions
106
+ - Responsive sizing systems
107
+ - Breakpoint-specific dimension scales
108
+
109
+ ## License
110
+
111
+ LGPL-3.0
112
+
113
+ ## Contributing
114
+
115
+ This project is maintained by the Canonical Webteam. For questions or contributions, please contact webteam@canonical.com.
package/dist/css/color/dark.css ADDED
@@ -0,0 +1,63 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --tmp-color-positive: #62a36c;
7
+ --tmp-color-negative: #d17b85;
8
+ --tmp-color-information: #5ea6ed;
9
+ --tmp-color-caution: #c48831;
10
+ --tmp-color-text: #ffffff;
11
+ --tmp-color-text-muted: rgba(255, 255, 255, 0.6);
12
+ --tmp-color-text-inactive: rgba(255, 255, 255, 0.75);
13
+ --tmp-color-text-reversed: #000000;
14
+ --tmp-color-text-link-default: #6699cc;
15
+ --tmp-color-text-link-visited: #a679d2;
16
+ --tmp-color-background-neutral-default: rgba(255, 255, 255, 0.15);
17
+ --tmp-color-background-neutral-hover: rgba(255, 255, 255, 0.2);
18
+ --tmp-color-background-neutral-active: rgba(255, 255, 255, 0.25);
19
+ --tmp-color-background-positive-default: rgba(10, 189, 37, 0.2);
20
+ --tmp-color-background-positive-hover: rgba(0, 199, 30, 0.3);
21
+ --tmp-color-background-positive-active: rgba(0, 199, 30, 0.36);
22
+ --tmp-color-background-negative-default: rgba(255, 102, 120, 0.2);
23
+ --tmp-color-background-negative-hover: rgba(255, 102, 120, 0.3);
24
+ --tmp-color-background-negative-active: rgba(255, 102, 120, 0.36);
25
+ --tmp-color-background-information-default: rgba(0, 137, 255, 0.2);
26
+ --tmp-color-background-information-hover: rgba(0, 137, 255, 0.3);
27
+ --tmp-color-background-information-active: rgba(0, 137, 255, 0.36);
28
+ --tmp-color-background-caution-default: rgba(255, 115, 0, 0.2);
29
+ --tmp-color-background-caution-hover: rgba(255, 143, 51, 0.3);
30
+ --tmp-color-background-caution-caution-active: rgba(255, 115, 0, 0.36);
31
+ --tmp-color-background-input: #2f2f2f;
32
+ --tmp-color-background-overlay: rgba(17, 17, 17, 0.85);
33
+ --tmp-color-background-button-positive-default: #008013;
34
+ --tmp-color-background-button-positive-hover: #00670f;
35
+ --tmp-color-background-button-positive-active: #00570d;
36
+ --tmp-color-background-button-negative-default: #a11223;
37
+ --tmp-color-background-button-negative-hover: #8a0f1e;
38
+ --tmp-color-background-button-negative-active: #7c0e1b;
39
+ --tmp-color-border-default: rgba(255, 255, 255, 0.2);
40
+ --tmp-color-border-high-contrast: #939393;
41
+ --tmp-color-border-low-contrast: rgba(255, 255, 255, 0.1);
42
+ --tmp-color-border-neutral: #a6a6a6;
43
+ --tmp-color-border-positive: #62a36c;
44
+ --tmp-color-border-negative: #d17b85;
45
+ --tmp-color-border-information: #5ea6ed;
46
+ --tmp-color-border-caution: #c48831;
47
+ --tmp-color-icon-default: #000000;
48
+ --tmp-color-icon-muted: rgba(0, 0, 0, 0.6);
49
+ --tmp-color-icon-positive: #0e8420;
50
+ --tmp-color-icon-negative: #c7162b;
51
+ --tmp-color-icon-information: #24598f;
52
+ --tmp-color-icon-caution: #cc7900;
53
+ --tmp-color-icon-link: #0066cc;
54
+ --tmp-color-icon-status-shade-1: #f7f7f7;
55
+ --tmp-color-icon-status-shade-2: #d9d9d9;
56
+ --tmp-color-icon-status-queued: #808080;
57
+ --tmp-color-icon-canonical-logo: #ffffff;
58
+ --tmp-color-icon-button-brand: #ffffff;
59
+ --tmp-color-icon-button-default: #000000;
60
+ --tmp-color-icon-button-base: #000000;
61
+ --tmp-color-icon-button-positive: #ffffff;
62
+ --tmp-color-icon-button-negative: #ffffff;
63
+ }
package/dist/css/color/light.css ADDED
@@ -0,0 +1,63 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --tmp-color-positive: #0e8420;
7
+ --tmp-color-negative: #c7162b;
8
+ --tmp-color-information: #24598f;
9
+ --tmp-color-caution: #cc7900;
10
+ --tmp-color-text: #000000;
11
+ --tmp-color-text-muted: rgba(0, 0, 0, 0.6);
12
+ --tmp-color-text-inactive: rgba(0, 0, 0, 0.75);
13
+ --tmp-color-text-reversed: #ffffff;
14
+ --tmp-color-text-link-default: #0066cc;
15
+ --tmp-color-text-link-visited: #7d42b8;
16
+ --tmp-color-background-neutral-default: #f2f2f2;
17
+ --tmp-color-background-neutral-hover: #e5e5e5;
18
+ --tmp-color-background-neutral-active: #dedede;
19
+ --tmp-color-background-positive-default: rgba(10, 189, 37, 0.1);
20
+ --tmp-color-background-positive-hover: rgba(0, 199, 30, 0.15);
21
+ --tmp-color-background-positive-active: rgba(0, 199, 30, 0.18);
22
+ --tmp-color-background-negative-default: rgba(199, 0, 20, 0.1);
23
+ --tmp-color-background-negative-hover: rgba(199, 0, 20, 0.15);
24
+ --tmp-color-background-negative-active: rgba(199, 0, 20, 0.18);
25
+ --tmp-color-background-information-default: rgba(0, 99, 199, 0.1);
26
+ --tmp-color-background-information-hover: rgba(0, 99, 199, 0.15);
27
+ --tmp-color-background-information-active: rgba(0, 99, 199, 0.18);
28
+ --tmp-color-background-caution-default: rgba(199, 90, 0, 0.1);
29
+ --tmp-color-background-caution-hover: rgba(199, 90, 0, 0.15);
30
+ --tmp-color-background-caution-caution-active: rgba(199, 90, 0, 0.18);
31
+ --tmp-color-background-input: #f5f5f5;
32
+ --tmp-color-background-overlay: rgba(17, 17, 17, 0.85);
33
+ --tmp-color-background-button-positive-default: #0e8420;
34
+ --tmp-color-background-button-positive-hover: #0c6d1a;
35
+ --tmp-color-background-button-positive-active: #0a5f17;
36
+ --tmp-color-background-button-negative-default: #c7162b;
37
+ --tmp-color-background-button-negative-hover: #b01326;
38
+ --tmp-color-background-button-negative-active: #a21223;
39
+ --tmp-color-border-default: rgba(0, 0, 0, 0.2);
40
+ --tmp-color-border-high-contrast: #707070;
41
+ --tmp-color-border-low-contrast: rgba(0, 0, 0, 0.1);
42
+ --tmp-color-border-neutral: rgba(0, 0, 0, 0.56);
43
+ --tmp-color-border-positive: #0e8420;
44
+ --tmp-color-border-negative: #c7162b;
45
+ --tmp-color-border-information: #24598f;
46
+ --tmp-color-border-caution: #cc7900;
47
+ --tmp-color-icon-default: #000000;
48
+ --tmp-color-icon-muted: rgba(0, 0, 0, 0.6);
49
+ --tmp-color-icon-positive: #0e8420;
50
+ --tmp-color-icon-negative: #c7162b;
51
+ --tmp-color-icon-information: #24598f;
52
+ --tmp-color-icon-caution: #cc7900;
53
+ --tmp-color-icon-link: #0066cc;
54
+ --tmp-color-icon-status-shade-1: #f7f7f7;
55
+ --tmp-color-icon-status-shade-2: #d9d9d9;
56
+ --tmp-color-icon-status-queued: #808080;
57
+ --tmp-color-icon-canonical-logo: #ffffff;
58
+ --tmp-color-icon-button-brand: #ffffff;
59
+ --tmp-color-icon-button-default: #000000;
60
+ --tmp-color-icon-button-base: #000000;
61
+ --tmp-color-icon-button-positive: #ffffff;
62
+ --tmp-color-icon-button-negative: #ffffff;
63
+ }
package/dist/css/color/system.css ADDED
@@ -0,0 +1,132 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ @media (prefers-color-scheme: dark) {
6
+ :root {
7
+ --tmp-color-positive: #62a36c;
8
+ --tmp-color-negative: #d17b85;
9
+ --tmp-color-information: #5ea6ed;
10
+ --tmp-color-caution: #c48831;
11
+ --tmp-color-text: #ffffff;
12
+ --tmp-color-text-muted: rgba(255, 255, 255, 0.6);
13
+ --tmp-color-text-inactive: rgba(255, 255, 255, 0.75);
14
+ --tmp-color-text-reversed: #000000;
15
+ --tmp-color-text-link-default: #6699cc;
16
+ --tmp-color-text-link-visited: #a679d2;
17
+ --tmp-color-background-neutral-default: rgba(255, 255, 255, 0.15);
18
+ --tmp-color-background-neutral-hover: rgba(255, 255, 255, 0.2);
19
+ --tmp-color-background-neutral-active: rgba(255, 255, 255, 0.25);
20
+ --tmp-color-background-positive-default: rgba(10, 189, 37, 0.2);
21
+ --tmp-color-background-positive-hover: rgba(0, 199, 30, 0.3);
22
+ --tmp-color-background-positive-active: rgba(0, 199, 30, 0.36);
23
+ --tmp-color-background-negative-default: rgba(255, 102, 120, 0.2);
24
+ --tmp-color-background-negative-hover: rgba(255, 102, 120, 0.3);
25
+ --tmp-color-background-negative-active: rgba(255, 102, 120, 0.36);
26
+ --tmp-color-background-information-default: rgba(0, 137, 255, 0.2);
27
+ --tmp-color-background-information-hover: rgba(0, 137, 255, 0.3);
28
+ --tmp-color-background-information-active: rgba(0, 137, 255, 0.36);
29
+ --tmp-color-background-caution-default: rgba(255, 115, 0, 0.2);
30
+ --tmp-color-background-caution-hover: rgba(255, 143, 51, 0.3);
31
+ --tmp-color-background-caution-caution-active: rgba(255, 115, 0, 0.36);
32
+ --tmp-color-background-input: #2f2f2f;
33
+ --tmp-color-background-overlay: rgba(17, 17, 17, 0.85);
34
+ --tmp-color-background-button-positive-default: #008013;
35
+ --tmp-color-background-button-positive-hover: #00670f;
36
+ --tmp-color-background-button-positive-active: #00570d;
37
+ --tmp-color-background-button-negative-default: #a11223;
38
+ --tmp-color-background-button-negative-hover: #8a0f1e;
39
+ --tmp-color-background-button-negative-active: #7c0e1b;
40
+ --tmp-color-border-default: rgba(255, 255, 255, 0.2);
41
+ --tmp-color-border-high-contrast: #939393;
42
+ --tmp-color-border-low-contrast: rgba(255, 255, 255, 0.1);
43
+ --tmp-color-border-neutral: #a6a6a6;
44
+ --tmp-color-border-positive: #62a36c;
45
+ --tmp-color-border-negative: #d17b85;
46
+ --tmp-color-border-information: #5ea6ed;
47
+ --tmp-color-border-caution: #c48831;
48
+ --tmp-color-icon-default: #000000;
49
+ --tmp-color-icon-muted: rgba(0, 0, 0, 0.6);
50
+ --tmp-color-icon-positive: #0e8420;
51
+ --tmp-color-icon-negative: #c7162b;
52
+ --tmp-color-icon-information: #24598f;
53
+ --tmp-color-icon-caution: #cc7900;
54
+ --tmp-color-icon-link: #0066cc;
55
+ --tmp-color-icon-status-shade-1: #f7f7f7;
56
+ --tmp-color-icon-status-shade-2: #d9d9d9;
57
+ --tmp-color-icon-status-queued: #808080;
58
+ --tmp-color-icon-canonical-logo: #ffffff;
59
+ --tmp-color-icon-button-brand: #ffffff;
60
+ --tmp-color-icon-button-default: #000000;
61
+ --tmp-color-icon-button-base: #000000;
62
+ --tmp-color-icon-button-positive: #ffffff;
63
+ --tmp-color-icon-button-negative: #ffffff;
64
+ }
65
+ }
66
+
67
+
68
+ /**
69
+ * Do not edit directly, this file was auto-generated.
70
+ */
71
+
72
+ @media (prefers-color-scheme: light) {
73
+ :root {
74
+ --tmp-color-positive: #0e8420;
75
+ --tmp-color-negative: #c7162b;
76
+ --tmp-color-information: #24598f;
77
+ --tmp-color-caution: #cc7900;
78
+ --tmp-color-text: #000000;
79
+ --tmp-color-text-muted: rgba(0, 0, 0, 0.6);
80
+ --tmp-color-text-inactive: rgba(0, 0, 0, 0.75);
81
+ --tmp-color-text-reversed: #ffffff;
82
+ --tmp-color-text-link-default: #0066cc;
83
+ --tmp-color-text-link-visited: #7d42b8;
84
+ --tmp-color-background-neutral-default: #f2f2f2;
85
+ --tmp-color-background-neutral-hover: #e5e5e5;
86
+ --tmp-color-background-neutral-active: #dedede;
87
+ --tmp-color-background-positive-default: rgba(10, 189, 37, 0.1);
88
+ --tmp-color-background-positive-hover: rgba(0, 199, 30, 0.15);
89
+ --tmp-color-background-positive-active: rgba(0, 199, 30, 0.18);
90
+ --tmp-color-background-negative-default: rgba(199, 0, 20, 0.1);
91
+ --tmp-color-background-negative-hover: rgba(199, 0, 20, 0.15);
92
+ --tmp-color-background-negative-active: rgba(199, 0, 20, 0.18);
93
+ --tmp-color-background-information-default: rgba(0, 99, 199, 0.1);
94
+ --tmp-color-background-information-hover: rgba(0, 99, 199, 0.15);
95
+ --tmp-color-background-information-active: rgba(0, 99, 199, 0.18);
96
+ --tmp-color-background-caution-default: rgba(199, 90, 0, 0.1);
97
+ --tmp-color-background-caution-hover: rgba(199, 90, 0, 0.15);
98
+ --tmp-color-background-caution-caution-active: rgba(199, 90, 0, 0.18);
99
+ --tmp-color-background-input: #f5f5f5;
100
+ --tmp-color-background-overlay: rgba(17, 17, 17, 0.85);
101
+ --tmp-color-background-button-positive-default: #0e8420;
102
+ --tmp-color-background-button-positive-hover: #0c6d1a;
103
+ --tmp-color-background-button-positive-active: #0a5f17;
104
+ --tmp-color-background-button-negative-default: #c7162b;
105
+ --tmp-color-background-button-negative-hover: #b01326;
106
+ --tmp-color-background-button-negative-active: #a21223;
107
+ --tmp-color-border-default: rgba(0, 0, 0, 0.2);
108
+ --tmp-color-border-high-contrast: #707070;
109
+ --tmp-color-border-low-contrast: rgba(0, 0, 0, 0.1);
110
+ --tmp-color-border-neutral: rgba(0, 0, 0, 0.56);
111
+ --tmp-color-border-positive: #0e8420;
112
+ --tmp-color-border-negative: #c7162b;
113
+ --tmp-color-border-information: #24598f;
114
+ --tmp-color-border-caution: #cc7900;
115
+ --tmp-color-icon-default: #000000;
116
+ --tmp-color-icon-muted: rgba(0, 0, 0, 0.6);
117
+ --tmp-color-icon-positive: #0e8420;
118
+ --tmp-color-icon-negative: #c7162b;
119
+ --tmp-color-icon-information: #24598f;
120
+ --tmp-color-icon-caution: #cc7900;
121
+ --tmp-color-icon-link: #0066cc;
122
+ --tmp-color-icon-status-shade-1: #f7f7f7;
123
+ --tmp-color-icon-status-shade-2: #d9d9d9;
124
+ --tmp-color-icon-status-queued: #808080;
125
+ --tmp-color-icon-canonical-logo: #ffffff;
126
+ --tmp-color-icon-button-brand: #ffffff;
127
+ --tmp-color-icon-button-default: #000000;
128
+ --tmp-color-icon-button-base: #000000;
129
+ --tmp-color-icon-button-positive: #ffffff;
130
+ --tmp-color-icon-button-negative: #ffffff;
131
+ }
132
+ }
package/dist/css/dimension/extraWide.css ADDED
@@ -0,0 +1,24 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --tmp-dimension-spacing-inline-xxx-small: 0.25rem;
7
+ --tmp-dimension-spacing-inline-xx-small: 0.5rem;
8
+ --tmp-dimension-spacing-inline-x-small: 0.75rem;
9
+ --tmp-dimension-spacing-inline-small: 1rem;
10
+ --tmp-dimension-spacing-inline-medium: 1.5rem;
11
+ --tmp-dimension-spacing-inline-large: 2rem;
12
+ --tmp-dimension-spacing-inline-x-large: 2.5rem;
13
+ --tmp-dimension-spacing-inline-xx-large: 3rem;
14
+ --tmp-dimension-spacing-inline-xxx-large: 3.5rem;
15
+ --tmp-dimension-spacing-block-xxx-small: 0.25rem;
16
+ --tmp-dimension-spacing-block-xx-small: 0.5rem;
17
+ --tmp-dimension-spacing-block-x-small: 0.75rem;
18
+ --tmp-dimension-spacing-block-small: 1rem;
19
+ --tmp-dimension-spacing-block-medium: 1.5rem;
20
+ --tmp-dimension-spacing-block-large: 2rem;
21
+ --tmp-dimension-spacing-block-x-large: 2.5rem;
22
+ --tmp-dimension-spacing-block-xx-large: 3rem;
23
+ --tmp-dimension-spacing-block-xxx-large: 3.5rem;
24
+ }
package/dist/css/dimension/medium.css ADDED
@@ -0,0 +1,24 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --tmp-dimension-spacing-inline-xxx-small: 0.125rem;
7
+ --tmp-dimension-spacing-inline-xx-small: 0.25rem;
8
+ --tmp-dimension-spacing-inline-x-small: 0.5rem;
9
+ --tmp-dimension-spacing-inline-small: 0.75rem;
10
+ --tmp-dimension-spacing-inline-medium: 1rem;
11
+ --tmp-dimension-spacing-inline-large: 1.5rem;
12
+ --tmp-dimension-spacing-inline-x-large: 2rem;
13
+ --tmp-dimension-spacing-inline-xx-large: 2.5rem;
14
+ --tmp-dimension-spacing-inline-xxx-large: 3rem;
15
+ --tmp-dimension-spacing-block-xxx-small: 0.125rem;
16
+ --tmp-dimension-spacing-block-xx-small: 0.25rem;
17
+ --tmp-dimension-spacing-block-x-small: 0.5rem;
18
+ --tmp-dimension-spacing-block-small: 0.75rem;
19
+ --tmp-dimension-spacing-block-medium: 1rem;
20
+ --tmp-dimension-spacing-block-large: 1.5rem;
21
+ --tmp-dimension-spacing-block-x-large: 2rem;
22
+ --tmp-dimension-spacing-block-xx-large: 2.5rem;
23
+ --tmp-dimension-spacing-block-xxx-large: 3rem;
24
+ }
package/dist/css/dimension/narrow.css ADDED
@@ -0,0 +1,24 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --tmp-dimension-spacing-inline-xxx-small: 0.125rem;
7
+ --tmp-dimension-spacing-inline-xx-small: 0.25rem;
8
+ --tmp-dimension-spacing-inline-x-small: 0.375rem;
9
+ --tmp-dimension-spacing-inline-small: 0.5rem;
10
+ --tmp-dimension-spacing-inline-medium: 0.75rem;
11
+ --tmp-dimension-spacing-inline-large: 1rem;
12
+ --tmp-dimension-spacing-inline-x-large: 1.25rem;
13
+ --tmp-dimension-spacing-inline-xx-large: 1.5rem;
14
+ --tmp-dimension-spacing-inline-xxx-large: 2rem;
15
+ --tmp-dimension-spacing-block-xxx-small: 0.125rem;
16
+ --tmp-dimension-spacing-block-xx-small: 0.25rem;
17
+ --tmp-dimension-spacing-block-x-small: 0.375rem;
18
+ --tmp-dimension-spacing-block-small: 0.5rem;
19
+ --tmp-dimension-spacing-block-medium: 0.75rem;
20
+ --tmp-dimension-spacing-block-large: 1rem;
21
+ --tmp-dimension-spacing-block-x-large: 1.25rem;
22
+ --tmp-dimension-spacing-block-xx-large: 1.5rem;
23
+ --tmp-dimension-spacing-block-xxx-large: 2rem;
24
+ }
package/dist/css/dimension/responsive.css ADDED
@@ -0,0 +1,108 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ @media (min-width: 621px) {
6
+ :root {
7
+ --tmp-dimension-spacing-inline-xxx-small: 0.125rem;
8
+ --tmp-dimension-spacing-inline-xx-small: 0.25rem;
9
+ --tmp-dimension-spacing-inline-x-small: 0.5rem;
10
+ --tmp-dimension-spacing-inline-small: 0.75rem;
11
+ --tmp-dimension-spacing-inline-medium: 1rem;
12
+ --tmp-dimension-spacing-inline-large: 1.5rem;
13
+ --tmp-dimension-spacing-inline-x-large: 2rem;
14
+ --tmp-dimension-spacing-inline-xx-large: 2.5rem;
15
+ --tmp-dimension-spacing-inline-xxx-large: 3rem;
16
+ --tmp-dimension-spacing-block-xxx-small: 0.125rem;
17
+ --tmp-dimension-spacing-block-xx-small: 0.25rem;
18
+ --tmp-dimension-spacing-block-x-small: 0.5rem;
19
+ --tmp-dimension-spacing-block-small: 0.75rem;
20
+ --tmp-dimension-spacing-block-medium: 1rem;
21
+ --tmp-dimension-spacing-block-large: 1.5rem;
22
+ --tmp-dimension-spacing-block-x-large: 2rem;
23
+ --tmp-dimension-spacing-block-xx-large: 2.5rem;
24
+ --tmp-dimension-spacing-block-xxx-large: 3rem;
25
+ }
26
+ }
27
+
28
+
29
+ /**
30
+ * Do not edit directly, this file was auto-generated.
31
+ */
32
+
33
+ :root {
34
+ --tmp-dimension-spacing-inline-xxx-small: 0.125rem;
35
+ --tmp-dimension-spacing-inline-xx-small: 0.25rem;
36
+ --tmp-dimension-spacing-inline-x-small: 0.375rem;
37
+ --tmp-dimension-spacing-inline-small: 0.5rem;
38
+ --tmp-dimension-spacing-inline-medium: 0.75rem;
39
+ --tmp-dimension-spacing-inline-large: 1rem;
40
+ --tmp-dimension-spacing-inline-x-large: 1.25rem;
41
+ --tmp-dimension-spacing-inline-xx-large: 1.5rem;
42
+ --tmp-dimension-spacing-inline-xxx-large: 2rem;
43
+ --tmp-dimension-spacing-block-xxx-small: 0.125rem;
44
+ --tmp-dimension-spacing-block-xx-small: 0.25rem;
45
+ --tmp-dimension-spacing-block-x-small: 0.375rem;
46
+ --tmp-dimension-spacing-block-small: 0.5rem;
47
+ --tmp-dimension-spacing-block-medium: 0.75rem;
48
+ --tmp-dimension-spacing-block-large: 1rem;
49
+ --tmp-dimension-spacing-block-x-large: 1.25rem;
50
+ --tmp-dimension-spacing-block-xx-large: 1.5rem;
51
+ --tmp-dimension-spacing-block-xxx-large: 2rem;
52
+ }
53
+
54
+
55
+ /**
56
+ * Do not edit directly, this file was auto-generated.
57
+ */
58
+
59
+ @media (min-width: 1681px) {
60
+ :root {
61
+ --tmp-dimension-spacing-inline-xxx-small: 0.25rem;
62
+ --tmp-dimension-spacing-inline-xx-small: 0.5rem;
63
+ --tmp-dimension-spacing-inline-x-small: 0.75rem;
64
+ --tmp-dimension-spacing-inline-small: 1rem;
65
+ --tmp-dimension-spacing-inline-medium: 1.5rem;
66
+ --tmp-dimension-spacing-inline-large: 2rem;
67
+ --tmp-dimension-spacing-inline-x-large: 2.5rem;
68
+ --tmp-dimension-spacing-inline-xx-large: 3rem;
69
+ --tmp-dimension-spacing-inline-xxx-large: 3.5rem;
70
+ --tmp-dimension-spacing-block-xxx-small: 0.25rem;
71
+ --tmp-dimension-spacing-block-xx-small: 0.5rem;
72
+ --tmp-dimension-spacing-block-x-small: 0.75rem;
73
+ --tmp-dimension-spacing-block-small: 1rem;
74
+ --tmp-dimension-spacing-block-medium: 1.5rem;
75
+ --tmp-dimension-spacing-block-large: 2rem;
76
+ --tmp-dimension-spacing-block-x-large: 2.5rem;
77
+ --tmp-dimension-spacing-block-xx-large: 3rem;
78
+ --tmp-dimension-spacing-block-xxx-large: 3.5rem;
79
+ }
80
+ }
81
+
82
+
83
+ /**
84
+ * Do not edit directly, this file was auto-generated.
85
+ */
86
+
87
+ @media (min-width: 1037px) {
88
+ :root {
89
+ --tmp-dimension-spacing-inline-xxx-small: 0.125rem;
90
+ --tmp-dimension-spacing-inline-xx-small: 0.25rem;
91
+ --tmp-dimension-spacing-inline-x-small: 0.5rem;
92
+ --tmp-dimension-spacing-inline-small: 0.75rem;
93
+ --tmp-dimension-spacing-inline-medium: 1rem;
94
+ --tmp-dimension-spacing-inline-large: 1.5rem;
95
+ --tmp-dimension-spacing-inline-x-large: 2rem;
96
+ --tmp-dimension-spacing-inline-xx-large: 2.5rem;
97
+ --tmp-dimension-spacing-inline-xxx-large: 3rem;
98
+ --tmp-dimension-spacing-block-xxx-small: 0.125rem;
99
+ --tmp-dimension-spacing-block-xx-small: 0.25rem;
100
+ --tmp-dimension-spacing-block-x-small: 0.5rem;
101
+ --tmp-dimension-spacing-block-small: 0.75rem;
102
+ --tmp-dimension-spacing-block-medium: 1rem;
103
+ --tmp-dimension-spacing-block-large: 1.5rem;
104
+ --tmp-dimension-spacing-block-x-large: 2rem;
105
+ --tmp-dimension-spacing-block-xx-large: 2.5rem;
106
+ --tmp-dimension-spacing-block-xxx-large: 3rem;
107
+ }
108
+ }
package/dist/css/dimension/wide.css ADDED
@@ -0,0 +1,24 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --tmp-dimension-spacing-inline-xxx-small: 0.125rem;
7
+ --tmp-dimension-spacing-inline-xx-small: 0.25rem;
8
+ --tmp-dimension-spacing-inline-x-small: 0.5rem;
9
+ --tmp-dimension-spacing-inline-small: 0.75rem;
10
+ --tmp-dimension-spacing-inline-medium: 1rem;
11
+ --tmp-dimension-spacing-inline-large: 1.5rem;
12
+ --tmp-dimension-spacing-inline-x-large: 2rem;
13
+ --tmp-dimension-spacing-inline-xx-large: 2.5rem;
14
+ --tmp-dimension-spacing-inline-xxx-large: 3rem;
15
+ --tmp-dimension-spacing-block-xxx-small: 0.125rem;
16
+ --tmp-dimension-spacing-block-xx-small: 0.25rem;
17
+ --tmp-dimension-spacing-block-x-small: 0.5rem;
18
+ --tmp-dimension-spacing-block-small: 0.75rem;
19
+ --tmp-dimension-spacing-block-medium: 1rem;
20
+ --tmp-dimension-spacing-block-large: 1.5rem;
21
+ --tmp-dimension-spacing-block-x-large: 2rem;
22
+ --tmp-dimension-spacing-block-xx-large: 2.5rem;
23
+ --tmp-dimension-spacing-block-xxx-large: 3rem;
24
+ }
package/dist/css/typography/extraWide.css ADDED
@@ -0,0 +1,26 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --tmp-typography-font-size-x-small: 0.75rem;
7
+ --tmp-typography-font-size-small: 0.875rem;
8
+ --tmp-typography-font-size-medium: 1rem;
9
+ --tmp-typography-font-size-large: 1.5rem;
10
+ --tmp-typography-font-size-x-large: 1.75rem;
11
+ --tmp-typography-font-size-xx-large: 2rem;
12
+ --tmp-typography-line-height-x-small: 1.125rem;
13
+ --tmp-typography-line-height-small: 1.3125rem;
14
+ --tmp-typography-line-height-medium: 1.5rem;
15
+ --tmp-typography-line-height-large: 2rem;
16
+ --tmp-typography-weight-180: 180;
17
+ --tmp-typography-weight-200: 200;
18
+ --tmp-typography-weight-300: 300;
19
+ --tmp-typography-weight-400: 400;
20
+ --tmp-typography-weight-450: 450;
21
+ --tmp-typography-letter-spacing-medium: 0em;
22
+ --tmp-typography-letter-spacing-large: 0.05em;
23
+ --tmp-typography-letter-spacing-x-large: 0.07em;
24
+ --tmp-typography-font-family-default: 'Ubuntu Sans';
25
+ --tmp-typography-font-family-mono: 'Ubuntu Sans Mono';
26
+ }
package/dist/css/typography/medium.css ADDED
@@ -0,0 +1,26 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --tmp-typography-font-size-x-small: 0.625rem;
7
+ --tmp-typography-font-size-small: 0.75rem;
8
+ --tmp-typography-font-size-medium: 0.875rem;
9
+ --tmp-typography-font-size-large: 1.3125rem;
10
+ --tmp-typography-font-size-x-large: 1.5rem;
11
+ --tmp-typography-font-size-xx-large: 1.75rem;
12
+ --tmp-typography-line-height-x-small: 0.9375rem;
13
+ --tmp-typography-line-height-small: 1.125rem;
14
+ --tmp-typography-line-height-medium: 1.3125rem;
15
+ --tmp-typography-line-height-large: 1.75rem;
16
+ --tmp-typography-weight-180: 180;
17
+ --tmp-typography-weight-200: 200;
18
+ --tmp-typography-weight-300: 300;
19
+ --tmp-typography-weight-400: 400;
20
+ --tmp-typography-weight-450: 450;
21
+ --tmp-typography-letter-spacing-medium: 0em;
22
+ --tmp-typography-letter-spacing-large: 0.05em;
23
+ --tmp-typography-letter-spacing-x-large: 0.07em;
24
+ --tmp-typography-font-family-default: 'Ubuntu Sans';
25
+ --tmp-typography-font-family-mono: 'Ubuntu Sans Mono';
26
+ }
package/dist/css/typography/narrow.css ADDED
@@ -0,0 +1,26 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --tmp-typography-font-size-x-small: 0.625rem;
7
+ --tmp-typography-font-size-small: 0.75rem;
8
+ --tmp-typography-font-size-medium: 0.875rem;
9
+ --tmp-typography-font-size-large: 1.3125rem;
10
+ --tmp-typography-font-size-x-large: 1.5rem;
11
+ --tmp-typography-font-size-xx-large: 1.75rem;
12
+ --tmp-typography-line-height-x-small: 0.9375rem;
13
+ --tmp-typography-line-height-small: 1.125rem;
14
+ --tmp-typography-line-height-medium: 1.3125rem;
15
+ --tmp-typography-line-height-large: 1.75rem;
16
+ --tmp-typography-weight-180: 180;
17
+ --tmp-typography-weight-200: 200;
18
+ --tmp-typography-weight-300: 300;
19
+ --tmp-typography-weight-400: 400;
20
+ --tmp-typography-weight-450: 450;
21
+ --tmp-typography-letter-spacing-medium: 0em;
22
+ --tmp-typography-letter-spacing-large: 0.05em;
23
+ --tmp-typography-letter-spacing-x-large: 0.07em;
24
+ --tmp-typography-font-family-default: 'Ubuntu Sans';
25
+ --tmp-typography-font-family-mono: 'Ubuntu Sans Mono';
26
+ }
package/dist/css/typography/responsive.css ADDED
@@ -0,0 +1,116 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ @media (min-width: 621px) {
6
+ :root {
7
+ --tmp-typography-font-size-x-small: 0.625rem;
8
+ --tmp-typography-font-size-small: 0.75rem;
9
+ --tmp-typography-font-size-medium: 0.875rem;
10
+ --tmp-typography-font-size-large: 1.3125rem;
11
+ --tmp-typography-font-size-x-large: 1.5rem;
12
+ --tmp-typography-font-size-xx-large: 1.75rem;
13
+ --tmp-typography-line-height-x-small: 0.9375rem;
14
+ --tmp-typography-line-height-small: 1.125rem;
15
+ --tmp-typography-line-height-medium: 1.3125rem;
16
+ --tmp-typography-line-height-large: 1.75rem;
17
+ --tmp-typography-weight-180: 180;
18
+ --tmp-typography-weight-200: 200;
19
+ --tmp-typography-weight-300: 300;
20
+ --tmp-typography-weight-400: 400;
21
+ --tmp-typography-weight-450: 450;
22
+ --tmp-typography-letter-spacing-medium: 0em;
23
+ --tmp-typography-letter-spacing-large: 0.05em;
24
+ --tmp-typography-letter-spacing-x-large: 0.07em;
25
+ --tmp-typography-font-family-default: "Ubuntu Sans";
26
+ --tmp-typography-font-family-mono: "Ubuntu Sans Mono";
27
+ }
28
+ }
29
+
30
+
31
+ /**
32
+ * Do not edit directly, this file was auto-generated.
33
+ */
34
+
35
+ :root {
36
+ --tmp-typography-font-size-x-small: 0.625rem;
37
+ --tmp-typography-font-size-small: 0.75rem;
38
+ --tmp-typography-font-size-medium: 0.875rem;
39
+ --tmp-typography-font-size-large: 1.3125rem;
40
+ --tmp-typography-font-size-x-large: 1.5rem;
41
+ --tmp-typography-font-size-xx-large: 1.75rem;
42
+ --tmp-typography-line-height-x-small: 0.9375rem;
43
+ --tmp-typography-line-height-small: 1.125rem;
44
+ --tmp-typography-line-height-medium: 1.3125rem;
45
+ --tmp-typography-line-height-large: 1.75rem;
46
+ --tmp-typography-weight-180: 180;
47
+ --tmp-typography-weight-200: 200;
48
+ --tmp-typography-weight-300: 300;
49
+ --tmp-typography-weight-400: 400;
50
+ --tmp-typography-weight-450: 450;
51
+ --tmp-typography-letter-spacing-medium: 0em;
52
+ --tmp-typography-letter-spacing-large: 0.05em;
53
+ --tmp-typography-letter-spacing-x-large: 0.07em;
54
+ --tmp-typography-font-family-default: "Ubuntu Sans";
55
+ --tmp-typography-font-family-mono: "Ubuntu Sans Mono";
56
+ }
57
+
58
+
59
+ /**
60
+ * Do not edit directly, this file was auto-generated.
61
+ */
62
+
63
+ @media (min-width: 1681px) {
64
+ :root {
65
+ --tmp-typography-font-size-x-small: 0.75rem;
66
+ --tmp-typography-font-size-small: 0.875rem;
67
+ --tmp-typography-font-size-medium: 1rem;
68
+ --tmp-typography-font-size-large: 1.5rem;
69
+ --tmp-typography-font-size-x-large: 1.75rem;
70
+ --tmp-typography-font-size-xx-large: 2rem;
71
+ --tmp-typography-line-height-x-small: 1.125rem;
72
+ --tmp-typography-line-height-small: 1.3125rem;
73
+ --tmp-typography-line-height-medium: 1.5rem;
74
+ --tmp-typography-line-height-large: 2rem;
75
+ --tmp-typography-weight-180: 180;
76
+ --tmp-typography-weight-200: 200;
77
+ --tmp-typography-weight-300: 300;
78
+ --tmp-typography-weight-400: 400;
79
+ --tmp-typography-weight-450: 450;
80
+ --tmp-typography-letter-spacing-medium: 0em;
81
+ --tmp-typography-letter-spacing-large: 0.05em;
82
+ --tmp-typography-letter-spacing-x-large: 0.07em;
83
+ --tmp-typography-font-family-default: "Ubuntu Sans";
84
+ --tmp-typography-font-family-mono: "Ubuntu Sans Mono";
85
+ }
86
+ }
87
+
88
+
89
+ /**
90
+ * Do not edit directly, this file was auto-generated.
91
+ */
92
+
93
+ @media (min-width: 1037px) {
94
+ :root {
95
+ --tmp-typography-font-size-x-small: 0.625rem;
96
+ --tmp-typography-font-size-small: 0.75rem;
97
+ --tmp-typography-font-size-medium: 0.875rem;
98
+ --tmp-typography-font-size-large: 1.3125rem;
99
+ --tmp-typography-font-size-x-large: 1.5rem;
100
+ --tmp-typography-font-size-xx-large: 1.75rem;
101
+ --tmp-typography-line-height-x-small: 0.9375rem;
102
+ --tmp-typography-line-height-small: 1.125rem;
103
+ --tmp-typography-line-height-medium: 1.3125rem;
104
+ --tmp-typography-line-height-large: 1.75rem;
105
+ --tmp-typography-weight-180: 180;
106
+ --tmp-typography-weight-200: 200;
107
+ --tmp-typography-weight-300: 300;
108
+ --tmp-typography-weight-400: 400;
109
+ --tmp-typography-weight-450: 450;
110
+ --tmp-typography-letter-spacing-medium: 0em;
111
+ --tmp-typography-letter-spacing-large: 0.05em;
112
+ --tmp-typography-letter-spacing-x-large: 0.07em;
113
+ --tmp-typography-font-family-default: "Ubuntu Sans";
114
+ --tmp-typography-font-family-mono: "Ubuntu Sans Mono";
115
+ }
116
+ }
package/dist/css/typography/wide.css ADDED
@@ -0,0 +1,26 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --tmp-typography-font-size-x-small: 0.625rem;
7
+ --tmp-typography-font-size-small: 0.75rem;
8
+ --tmp-typography-font-size-medium: 0.875rem;
9
+ --tmp-typography-font-size-large: 1.3125rem;
10
+ --tmp-typography-font-size-x-large: 1.5rem;
11
+ --tmp-typography-font-size-xx-large: 1.75rem;
12
+ --tmp-typography-line-height-x-small: 0.9375rem;
13
+ --tmp-typography-line-height-small: 1.125rem;
14
+ --tmp-typography-line-height-medium: 1.3125rem;
15
+ --tmp-typography-line-height-large: 1.75rem;
16
+ --tmp-typography-weight-180: 180;
17
+ --tmp-typography-weight-200: 200;
18
+ --tmp-typography-weight-300: 300;
19
+ --tmp-typography-weight-400: 400;
20
+ --tmp-typography-weight-450: 450;
21
+ --tmp-typography-letter-spacing-medium: 0em;
22
+ --tmp-typography-letter-spacing-large: 0.05em;
23
+ --tmp-typography-letter-spacing-x-large: 0.07em;
24
+ --tmp-typography-font-family-default: 'Ubuntu Sans';
25
+ --tmp-typography-font-family-mono: 'Ubuntu Sans Mono';
26
+ }
package/package.json ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ "name": "@canonical/launchpad-design-tokens",
3
+ "version": "1.0.0",
4
+ "description": "Design tokens for Canonical's Launchpad",
5
+ "files": ["dist/css"],
6
+ "type": "module",
7
+ "private": false,
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "https://github.com/canonical/launchpad-design-tokens.git"
11
+ },
12
+ "keywords": ["design-tokens", "canonical", "launchpad", "style-dictionary"],
13
+ "author": {
14
+ "email": "webteam@canonical.com",
15
+ "name": "Canonical Webteam"
16
+ },
17
+ "license": "LGPL-3.0",
18
+ "scripts": {
19
+ "build": "bun run build:color && bun run build:typography && bun run build:dimension",
20
+ "build:color": "bun run src/build/color.ts",
21
+ "build:typography": "bun run src/build/typography.ts",
22
+ "build:dimension": "bun run src/build/dimension.ts",
23
+ "check": "bun run check:biome && bun run check:ts",
24
+ "check:fix": "bun run check:biome:fix && bun run check:ts",
25
+ "check:biome": "biome check",
26
+ "check:biome:fix": "biome check --write",
27
+ "check:ts": "tsc --noEmit"
28
+ },
29
+ "devDependencies": {
30
+ "@biomejs/biome": "1.9.4",
31
+ "@canonical/biome-config": "^0.9.0",
32
+ "@canonical/typescript-config-base": "^0.9.0",
33
+ "@types/bun": "latest",
34
+ "style-dictionary": "^5.0.1",
35
+ "style-dictionary-utils": "^4.1.0",
36
+ "typescript": "^5.8.3"
37
+ }
38
+ }