@canonical/launchpad-design-tokens 1.0.21 → 1.0.23

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 (7) hide show
  1. package/dist/css/color/modifier.css +155 -0
  2. package/dist/css/dimension/extraWide.css +7 -7
  3. package/dist/css/dimension/medium.css +7 -7
  4. package/dist/css/dimension/narrow.css +7 -7
  5. package/dist/css/dimension/responsive.css +7 -7
  6. package/dist/css/dimension/wide.css +7 -7
  7. package/package.json +1 -1
package/dist/css/color/modifier.css ADDED
@@ -0,0 +1,155 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ .is-light,
6
+ .is-paper {
7
+ --lp-color-brand-default: #e95420;
8
+ --lp-color-brand-hover: #da4816;
9
+ --lp-color-brand-active: #cc4414;
10
+ --lp-color-positive: #0e8420;
11
+ --lp-color-negative: #c7162b;
12
+ --lp-color-information: #24598f;
13
+ --lp-color-caution: #cc7900;
14
+ --lp-color-text-default: #000000;
15
+ --lp-color-text-muted: rgba(0, 0, 0, 0.6);
16
+ --lp-color-text-inactive: rgba(0, 0, 0, 0.75);
17
+ --lp-color-text-reversed: #ffffff;
18
+ --lp-color-text-white: #ffffff;
19
+ --lp-color-text-link-default: #0066cc;
20
+ --lp-color-text-link-visited: #7d42b8;
21
+ --lp-color-background-default: #ffffff;
22
+ --lp-color-background-hover: #f2f2f2;
23
+ --lp-color-background-active: #ebebeb;
24
+ --lp-color-background-alt: #f7f7f7;
25
+ --lp-color-background-alt-reversed: #202020;
26
+ --lp-color-background-brand-default: rgba(233, 84, 32, 0.1);
27
+ --lp-color-background-brand-hover: rgba(233, 84, 32, 0.15);
28
+ --lp-color-background-brand-active: rgba(233, 84, 32, 0.1);
29
+ --lp-color-background-neutral-default: #f2f2f2;
30
+ --lp-color-background-neutral-hover: #e5e5e5;
31
+ --lp-color-background-neutral-active: #dedede;
32
+ --lp-color-background-positive-default: rgba(10, 189, 37, 0.1);
33
+ --lp-color-background-positive-hover: rgba(0, 199, 30, 0.15);
34
+ --lp-color-background-positive-active: rgba(0, 199, 30, 0.18);
35
+ --lp-color-background-negative-default: rgba(199, 0, 20, 0.1);
36
+ --lp-color-background-negative-hover: rgba(199, 0, 20, 0.15);
37
+ --lp-color-background-negative-active: rgba(199, 0, 20, 0.18);
38
+ --lp-color-background-information-default: rgba(0, 99, 199, 0.1);
39
+ --lp-color-background-information-hover: rgba(0, 99, 199, 0.15);
40
+ --lp-color-background-information-active: rgba(0, 99, 199, 0.18);
41
+ --lp-color-background-caution-default: rgba(199, 90, 0, 0.1);
42
+ --lp-color-background-caution-hover: rgba(199, 90, 0, 0.15);
43
+ --lp-color-background-caution-active: rgba(199, 90, 0, 0.18);
44
+ --lp-color-background-input: #f5f5f5;
45
+ --lp-color-background-overlay: rgba(17, 17, 17, 0.85);
46
+ --lp-color-border-default: rgba(0, 0, 0, 0.2);
47
+ --lp-color-border-highlight: #000000;
48
+ --lp-color-border-focus: #2e96ff;
49
+ --lp-color-border-high-contrast: #707070;
50
+ --lp-color-border-low-contrast: rgba(0, 0, 0, 0.1);
51
+ --lp-color-border-neutral: rgba(0, 0, 0, 0.56);
52
+ --lp-color-icon-status-shade-1: #f7f7f7;
53
+ --lp-color-icon-status-shade-2: #d9d9d9;
54
+ --lp-color-icon-status-queued: #808080;
55
+ --lp-color-fill-positive-hover: #0c6d1a;
56
+ --lp-color-fill-positive-active: #0a5f17;
57
+ --lp-color-fill-negative-hover: #b01326;
58
+ --lp-color-fill-negative-active: #a21223;
59
+ --lp-color-status-default: #666666;
60
+ --lp-color-status-positive: #0e8420;
61
+ --lp-color-status-negative: #c7162b;
62
+ --lp-color-status-information: #24598f;
63
+ --lp-color-status-caution: #cc7900;
64
+ --lp-color-border-positive: var(--lp-color-positive);
65
+ --lp-color-border-negative: var(--lp-color-negative);
66
+ --lp-color-border-information: var(--lp-color-information);
67
+ --lp-color-border-caution: var(--lp-color-caution);
68
+ --lp-color-icon-default: var(--lp-color-text-default);
69
+ --lp-color-icon-muted: var(--lp-color-text-muted);
70
+ --lp-color-icon-positive: var(--lp-color-positive);
71
+ --lp-color-icon-negative: var(--lp-color-negative);
72
+ --lp-color-icon-information: var(--lp-color-information);
73
+ --lp-color-icon-caution: var(--lp-color-caution);
74
+ --lp-color-icon-link: var(--lp-color-text-link-default);
75
+ --lp-color-fill-positive-default: var(--lp-color-positive);
76
+ --lp-color-fill-negative-default: var(--lp-color-negative);
77
+ }
78
+
79
+
80
+ /**
81
+ * Do not edit directly, this file was auto-generated.
82
+ */
83
+
84
+ .is-dark {
85
+ --lp-color-brand-default: #e95420;
86
+ --lp-color-brand-hover: #da4816;
87
+ --lp-color-brand-active: #cc4414;
88
+ --lp-color-positive: #62a36c;
89
+ --lp-color-negative: #d17b85;
90
+ --lp-color-information: #5ea6ed;
91
+ --lp-color-caution: #c48831;
92
+ --lp-color-text-default: #ffffff;
93
+ --lp-color-text-muted: rgba(255, 255, 255, 0.6);
94
+ --lp-color-text-inactive: rgba(255, 255, 255, 0.75);
95
+ --lp-color-text-reversed: #000000;
96
+ --lp-color-text-white: #ffffff;
97
+ --lp-color-text-link-default: #6699cc;
98
+ --lp-color-text-link-visited: #a679d2;
99
+ --lp-color-background-default: #262626;
100
+ --lp-color-background-hover: #313131;
101
+ --lp-color-background-active: #373737;
102
+ --lp-color-background-alt: #202020;
103
+ --lp-color-background-alt-reversed: #f7f7f7;
104
+ --lp-color-background-brand-default: rgba(233, 84, 32, 0.2);
105
+ --lp-color-background-brand-hover: rgba(233, 84, 32, 0.3);
106
+ --lp-color-background-brand-active: rgba(233, 84, 32, 0.36);
107
+ --lp-color-background-neutral-default: rgba(255, 255, 255, 0.15);
108
+ --lp-color-background-neutral-hover: rgba(255, 255, 255, 0.2);
109
+ --lp-color-background-neutral-active: rgba(255, 255, 255, 0.25);
110
+ --lp-color-background-positive-default: rgba(10, 189, 37, 0.2);
111
+ --lp-color-background-positive-hover: rgba(0, 199, 30, 0.3);
112
+ --lp-color-background-positive-active: rgba(0, 199, 30, 0.36);
113
+ --lp-color-background-negative-default: rgba(255, 102, 120, 0.2);
114
+ --lp-color-background-negative-hover: rgba(255, 102, 120, 0.3);
115
+ --lp-color-background-negative-active: rgba(255, 102, 120, 0.36);
116
+ --lp-color-background-information-default: rgba(0, 137, 255, 0.2);
117
+ --lp-color-background-information-hover: rgba(0, 137, 255, 0.3);
118
+ --lp-color-background-information-active: rgba(0, 137, 255, 0.36);
119
+ --lp-color-background-caution-default: rgba(255, 115, 0, 0.2);
120
+ --lp-color-background-caution-hover: rgba(255, 143, 51, 0.3);
121
+ --lp-color-background-caution-active: rgba(255, 115, 0, 0.36);
122
+ --lp-color-background-input: #2f2f2f;
123
+ --lp-color-background-overlay: rgba(17, 17, 17, 0.85);
124
+ --lp-color-border-default: rgba(255, 255, 255, 0.2);
125
+ --lp-color-border-highlight: #ffffff;
126
+ --lp-color-border-focus: #99ccff;
127
+ --lp-color-border-high-contrast: #939393;
128
+ --lp-color-border-low-contrast: rgba(255, 255, 255, 0.1);
129
+ --lp-color-border-neutral: #a6a6a6;
130
+ --lp-color-icon-status-shade-1: #f7f7f7;
131
+ --lp-color-icon-status-shade-2: #d9d9d9;
132
+ --lp-color-icon-status-queued: #808080;
133
+ --lp-color-fill-positive-default: #008013;
134
+ --lp-color-fill-positive-hover: #00670f;
135
+ --lp-color-fill-positive-active: #00570d;
136
+ --lp-color-fill-negative-default: #a11223;
137
+ --lp-color-fill-negative-hover: #8a0f1e;
138
+ --lp-color-fill-negative-active: #7c0e1b;
139
+ --lp-color-status-default: #666666;
140
+ --lp-color-status-positive: #0e8420;
141
+ --lp-color-status-negative: #c7162b;
142
+ --lp-color-status-information: #24598f;
143
+ --lp-color-status-caution: #cc7900;
144
+ --lp-color-border-positive: var(--lp-color-positive);
145
+ --lp-color-border-negative: var(--lp-color-negative);
146
+ --lp-color-border-information: var(--lp-color-information);
147
+ --lp-color-border-caution: var(--lp-color-caution);
148
+ --lp-color-icon-default: var(--lp-color-text-default);
149
+ --lp-color-icon-muted: var(--lp-color-text-muted);
150
+ --lp-color-icon-positive: var(--lp-color-positive);
151
+ --lp-color-icon-negative: var(--lp-color-negative);
152
+ --lp-color-icon-information: var(--lp-color-information);
153
+ --lp-color-icon-caution: var(--lp-color-caution);
154
+ --lp-color-icon-link: var(--lp-color-text-link-default);
155
+ }
package/dist/css/dimension/extraWide.css CHANGED
@@ -3,13 +3,13 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --dimension-stroke-thickness-default: 1px;
7
- --dimension-stroke-thickness-large: 3px;
8
- --dimension-radius-none: 0px;
9
- --dimension-radius-small: 0px;
10
- --dimension-radius-medium: 0px;
11
- --dimension-radius-large: 0px;
12
- --dimension-radius-full: 9999px;
6
+ --lp-dimension-stroke-thickness-default: 1px;
7
+ --lp-dimension-stroke-thickness-large: 3px;
8
+ --lp-dimension-radius-none: 0px;
9
+ --lp-dimension-radius-small: 0px;
10
+ --lp-dimension-radius-medium: 0px;
11
+ --lp-dimension-radius-large: 0px;
12
+ --lp-dimension-radius-full: 9999px;
13
13
  --lp-dimension-size-xxxs: 0.5rem;
14
14
  --lp-dimension-size-xxs: 0.75rem;
15
15
  --lp-dimension-size-xs: 1rem;
package/dist/css/dimension/medium.css CHANGED
@@ -3,13 +3,13 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --dimension-stroke-thickness-default: 1px;
7
- --dimension-stroke-thickness-large: 3px;
8
- --dimension-radius-none: 0px;
9
- --dimension-radius-small: 0px;
10
- --dimension-radius-medium: 0px;
11
- --dimension-radius-large: 0px;
12
- --dimension-radius-full: 9999px;
6
+ --lp-dimension-stroke-thickness-default: 1px;
7
+ --lp-dimension-stroke-thickness-large: 3px;
8
+ --lp-dimension-radius-none: 0px;
9
+ --lp-dimension-radius-small: 0px;
10
+ --lp-dimension-radius-medium: 0px;
11
+ --lp-dimension-radius-large: 0px;
12
+ --lp-dimension-radius-full: 9999px;
13
13
  --lp-dimension-size-xxxs: 0.5rem;
14
14
  --lp-dimension-size-xxs: 0.75rem;
15
15
  --lp-dimension-size-xs: 1rem;
package/dist/css/dimension/narrow.css CHANGED
@@ -3,13 +3,13 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --dimension-stroke-thickness-default: 1px;
7
- --dimension-stroke-thickness-large: 3px;
8
- --dimension-radius-none: 0px;
9
- --dimension-radius-small: 0px;
10
- --dimension-radius-medium: 0px;
11
- --dimension-radius-large: 0px;
12
- --dimension-radius-full: 9999px;
6
+ --lp-dimension-stroke-thickness-default: 1px;
7
+ --lp-dimension-stroke-thickness-large: 3px;
8
+ --lp-dimension-radius-none: 0px;
9
+ --lp-dimension-radius-small: 0px;
10
+ --lp-dimension-radius-medium: 0px;
11
+ --lp-dimension-radius-large: 0px;
12
+ --lp-dimension-radius-full: 9999px;
13
13
  --lp-dimension-size-xxxs: 0.5rem;
14
14
  --lp-dimension-size-xxs: 0.75rem;
15
15
  --lp-dimension-size-xs: 1rem;
package/dist/css/dimension/responsive.css CHANGED
@@ -3,13 +3,13 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --dimension-stroke-thickness-default: 1px;
7
- --dimension-stroke-thickness-large: 3px;
8
- --dimension-radius-none: 0px;
9
- --dimension-radius-small: 0px;
10
- --dimension-radius-medium: 0px;
11
- --dimension-radius-large: 0px;
12
- --dimension-radius-full: 9999px;
6
+ --lp-dimension-stroke-thickness-default: 1px;
7
+ --lp-dimension-stroke-thickness-large: 3px;
8
+ --lp-dimension-radius-none: 0px;
9
+ --lp-dimension-radius-small: 0px;
10
+ --lp-dimension-radius-medium: 0px;
11
+ --lp-dimension-radius-large: 0px;
12
+ --lp-dimension-radius-full: 9999px;
13
13
  --lp-dimension-size-xxxs: 0.5rem;
14
14
  --lp-dimension-size-xxs: 0.75rem;
15
15
  --lp-dimension-size-xs: 1rem;
package/dist/css/dimension/wide.css CHANGED
@@ -3,13 +3,13 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --dimension-stroke-thickness-default: 1px;
7
- --dimension-stroke-thickness-large: 3px;
8
- --dimension-radius-none: 0px;
9
- --dimension-radius-small: 0px;
10
- --dimension-radius-medium: 0px;
11
- --dimension-radius-large: 0px;
12
- --dimension-radius-full: 9999px;
6
+ --lp-dimension-stroke-thickness-default: 1px;
7
+ --lp-dimension-stroke-thickness-large: 3px;
8
+ --lp-dimension-radius-none: 0px;
9
+ --lp-dimension-radius-small: 0px;
10
+ --lp-dimension-radius-medium: 0px;
11
+ --lp-dimension-radius-large: 0px;
12
+ --lp-dimension-radius-full: 9999px;
13
13
  --lp-dimension-size-xxxs: 0.5rem;
14
14
  --lp-dimension-size-xxs: 0.75rem;
15
15
  --lp-dimension-size-xs: 1rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canonical/launchpad-design-tokens",
3
- "version": "1.0.21",
3
+ "version": "1.0.23",
4
4
  "description": "Design tokens for Canonical's Launchpad",
5
5
  "files": ["dist/css"],
6
6
  "type": "module",