@oscarpalmer/oui 0.1.0 → 0.2.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 (7) hide show
  1. package/dist/css/a11y.css +1 -0
  2. package/dist/css/colours.css +180 -0
  3. package/dist/css/flex.css +1 -0
  4. package/dist/css/mixins.css +1 -0
  5. package/package.json +3 -2
  6. package/src/css/colours.scss +13 -0
  7. package/src/css/mixins.scss +23 -0
package/dist/css/a11y.css CHANGED
@@ -1,3 +1,4 @@
1
+ /*! https://github.com/oscarpalmer/oui */
1
2
  :where(.visually-hidden) {
2
3
  position: absolute !important;
3
4
  }
package/dist/css/colours.css ADDED
@@ -0,0 +1,180 @@
1
+ :root {
2
+ --oui-blue-0: #f8fafd;
3
+ --oui-blue-1: color-mix(in srgb, var(--oui-blue-0), var(--oui-blue-6) 5%);
4
+ --oui-blue-2: color-mix(in srgb, var(--oui-blue-0), var(--oui-blue-6) 15%);
5
+ --oui-blue-3: color-mix(in srgb, var(--oui-blue-0), var(--oui-blue-6) 30%);
6
+ --oui-blue-4: color-mix(in srgb, var(--oui-blue-0), var(--oui-blue-6) 50%);
7
+ --oui-blue-5: color-mix(in srgb, var(--oui-blue-0), var(--oui-blue-6) 75%);
8
+ --oui-blue-6: #8ad;
9
+ --oui-blue-7: color-mix(in srgb, var(--oui-blue-10), var(--oui-blue-6) 75%);
10
+ --oui-blue-8: color-mix(in srgb, var(--oui-blue-10), var(--oui-blue-6) 50%);
11
+ --oui-blue-9: color-mix(in srgb, var(--oui-blue-10), var(--oui-blue-6) 25%);
12
+ --oui-blue-10: #123;
13
+ }
14
+ @media (prefers-color-scheme: dark) {
15
+ :root {
16
+ --oui-blue-0: #012;
17
+ --oui-blue-6: #47a;
18
+ --oui-blue-10: #d8dadd;
19
+ }
20
+ }
21
+ :root {
22
+ --oui-green-0: #f8fbf6;
23
+ --oui-green-1: color-mix(in srgb, var(--oui-green-0), var(--oui-green-6) 5%);
24
+ --oui-green-2: color-mix(in srgb, var(--oui-green-0), var(--oui-green-6) 15%);
25
+ --oui-green-3: color-mix(in srgb, var(--oui-green-0), var(--oui-green-6) 30%);
26
+ --oui-green-4: color-mix(in srgb, var(--oui-green-0), var(--oui-green-6) 50%);
27
+ --oui-green-5: color-mix(in srgb, var(--oui-green-0), var(--oui-green-6) 75%);
28
+ --oui-green-6: #8b6;
29
+ --oui-green-7: color-mix(in srgb, var(--oui-green-10), var(--oui-green-6) 75%);
30
+ --oui-green-8: color-mix(in srgb, var(--oui-green-10), var(--oui-green-6) 50%);
31
+ --oui-green-9: color-mix(in srgb, var(--oui-green-10), var(--oui-green-6) 25%);
32
+ --oui-green-10: #231;
33
+ }
34
+ @media (prefers-color-scheme: dark) {
35
+ :root {
36
+ --oui-green-0: #0a1a0a;
37
+ --oui-green-6: #794;
38
+ --oui-green-10: #d8dbd6;
39
+ }
40
+ }
41
+ :root {
42
+ --oui-grey-0: #f8f8f8;
43
+ --oui-grey-1: color-mix(in srgb, var(--oui-grey-0), var(--oui-grey-6) 5%);
44
+ --oui-grey-2: color-mix(in srgb, var(--oui-grey-0), var(--oui-grey-6) 15%);
45
+ --oui-grey-3: color-mix(in srgb, var(--oui-grey-0), var(--oui-grey-6) 30%);
46
+ --oui-grey-4: color-mix(in srgb, var(--oui-grey-0), var(--oui-grey-6) 50%);
47
+ --oui-grey-5: color-mix(in srgb, var(--oui-grey-0), var(--oui-grey-6) 75%);
48
+ --oui-grey-6: #888;
49
+ --oui-grey-7: color-mix(in srgb, var(--oui-grey-10), var(--oui-grey-6) 75%);
50
+ --oui-grey-8: color-mix(in srgb, var(--oui-grey-10), var(--oui-grey-6) 50%);
51
+ --oui-grey-9: color-mix(in srgb, var(--oui-grey-10), var(--oui-grey-6) 25%);
52
+ --oui-grey-10: #222;
53
+ }
54
+ @media (prefers-color-scheme: dark) {
55
+ :root {
56
+ --oui-grey-0: #111;
57
+ --oui-grey-6: #555;
58
+ --oui-grey-10: #d8d8d8;
59
+ }
60
+ }
61
+ :root {
62
+ --oui-orange-0: #fef7f5;
63
+ --oui-orange-1: color-mix(in srgb, var(--oui-orange-0), var(--oui-orange-6) 5%);
64
+ --oui-orange-2: color-mix(in srgb, var(--oui-orange-0), var(--oui-orange-6) 15%);
65
+ --oui-orange-3: color-mix(in srgb, var(--oui-orange-0), var(--oui-orange-6) 30%);
66
+ --oui-orange-4: color-mix(in srgb, var(--oui-orange-0), var(--oui-orange-6) 50%);
67
+ --oui-orange-5: color-mix(in srgb, var(--oui-orange-0), var(--oui-orange-6) 75%);
68
+ --oui-orange-6: #e85;
69
+ --oui-orange-7: color-mix(in srgb, var(--oui-orange-10), var(--oui-orange-6) 75%);
70
+ --oui-orange-8: color-mix(in srgb, var(--oui-orange-10), var(--oui-orange-6) 50%);
71
+ --oui-orange-9: color-mix(in srgb, var(--oui-orange-10), var(--oui-orange-6) 25%);
72
+ --oui-orange-10: #420;
73
+ }
74
+ @media (prefers-color-scheme: dark) {
75
+ :root {
76
+ --oui-orange-0: #2a1500;
77
+ --oui-orange-6: #950;
78
+ --oui-orange-10: #ded7d5;
79
+ }
80
+ }
81
+ :root {
82
+ --oui-purple-0: #fbf7fa;
83
+ --oui-purple-1: color-mix(in srgb, var(--oui-purple-0), var(--oui-purple-6) 5%);
84
+ --oui-purple-2: color-mix(in srgb, var(--oui-purple-0), var(--oui-purple-6) 15%);
85
+ --oui-purple-3: color-mix(in srgb, var(--oui-purple-0), var(--oui-purple-6) 30%);
86
+ --oui-purple-4: color-mix(in srgb, var(--oui-purple-0), var(--oui-purple-6) 50%);
87
+ --oui-purple-5: color-mix(in srgb, var(--oui-purple-0), var(--oui-purple-6) 75%);
88
+ --oui-purple-6: #b8a;
89
+ --oui-purple-7: color-mix(in srgb, var(--oui-purple-10), var(--oui-purple-6) 75%);
90
+ --oui-purple-8: color-mix(in srgb, var(--oui-purple-10), var(--oui-purple-6) 50%);
91
+ --oui-purple-9: color-mix(in srgb, var(--oui-purple-10), var(--oui-purple-6) 25%);
92
+ --oui-purple-10: #313;
93
+ }
94
+ @media (prefers-color-scheme: dark) {
95
+ :root {
96
+ --oui-purple-0: #1a0a1a;
97
+ --oui-purple-6: #858;
98
+ --oui-purple-10: #dbd7da;
99
+ }
100
+ }
101
+ :root {
102
+ --oui-slate-0: #f6f7f8;
103
+ --oui-slate-1: color-mix(in srgb, var(--oui-slate-0), var(--oui-slate-6) 5%);
104
+ --oui-slate-2: color-mix(in srgb, var(--oui-slate-0), var(--oui-slate-6) 15%);
105
+ --oui-slate-3: color-mix(in srgb, var(--oui-slate-0), var(--oui-slate-6) 30%);
106
+ --oui-slate-4: color-mix(in srgb, var(--oui-slate-0), var(--oui-slate-6) 50%);
107
+ --oui-slate-5: color-mix(in srgb, var(--oui-slate-0), var(--oui-slate-6) 75%);
108
+ --oui-slate-6: #708090;
109
+ --oui-slate-7: color-mix(in srgb, var(--oui-slate-10), var(--oui-slate-6) 75%);
110
+ --oui-slate-8: color-mix(in srgb, var(--oui-slate-10), var(--oui-slate-6) 50%);
111
+ --oui-slate-9: color-mix(in srgb, var(--oui-slate-10), var(--oui-slate-6) 25%);
112
+ --oui-slate-10: #242f2f;
113
+ }
114
+ @media (prefers-color-scheme: dark) {
115
+ :root {
116
+ --oui-slate-0: #011;
117
+ --oui-slate-6: #405060;
118
+ --oui-slate-10: #d6d7d8;
119
+ }
120
+ }
121
+ :root {
122
+ --oui-stone-0: #f8f8f6;
123
+ --oui-stone-1: color-mix(in srgb, var(--oui-stone-0), var(--oui-stone-6) 5%);
124
+ --oui-stone-2: color-mix(in srgb, var(--oui-stone-0), var(--oui-stone-6) 15%);
125
+ --oui-stone-3: color-mix(in srgb, var(--oui-stone-0), var(--oui-stone-6) 30%);
126
+ --oui-stone-4: color-mix(in srgb, var(--oui-stone-0), var(--oui-stone-6) 50%);
127
+ --oui-stone-5: color-mix(in srgb, var(--oui-stone-0), var(--oui-stone-6) 75%);
128
+ --oui-stone-6: #928e85;
129
+ --oui-stone-7: color-mix(in srgb, var(--oui-stone-10), var(--oui-stone-6) 75%);
130
+ --oui-stone-8: color-mix(in srgb, var(--oui-stone-10), var(--oui-stone-6) 50%);
131
+ --oui-stone-9: color-mix(in srgb, var(--oui-stone-10), var(--oui-stone-6) 25%);
132
+ --oui-stone-10: #2f2f24;
133
+ }
134
+ @media (prefers-color-scheme: dark) {
135
+ :root {
136
+ --oui-stone-0: #110;
137
+ --oui-stone-6: #625e55;
138
+ --oui-stone-10: #d8d8d6;
139
+ }
140
+ }
141
+ :root {
142
+ --oui-red-0: #fdf5f6;
143
+ --oui-red-1: color-mix(in srgb, var(--oui-red-0), var(--oui-red-6) 5%);
144
+ --oui-red-2: color-mix(in srgb, var(--oui-red-0), var(--oui-red-6) 15%);
145
+ --oui-red-3: color-mix(in srgb, var(--oui-red-0), var(--oui-red-6) 30%);
146
+ --oui-red-4: color-mix(in srgb, var(--oui-red-0), var(--oui-red-6) 50%);
147
+ --oui-red-5: color-mix(in srgb, var(--oui-red-0), var(--oui-red-6) 75%);
148
+ --oui-red-6: #d56;
149
+ --oui-red-7: color-mix(in srgb, var(--oui-red-10), var(--oui-red-6) 75%);
150
+ --oui-red-8: color-mix(in srgb, var(--oui-red-10), var(--oui-red-6) 50%);
151
+ --oui-red-9: color-mix(in srgb, var(--oui-red-10), var(--oui-red-6) 25%);
152
+ --oui-red-10: #422;
153
+ }
154
+ @media (prefers-color-scheme: dark) {
155
+ :root {
156
+ --oui-red-0: #200;
157
+ --oui-red-6: #823;
158
+ --oui-red-10: #ddd5d6;
159
+ }
160
+ }
161
+ :root {
162
+ --oui-yellow-0: #fcfaf4;
163
+ --oui-yellow-1: color-mix(in srgb, var(--oui-yellow-0), var(--oui-yellow-6) 5%);
164
+ --oui-yellow-2: color-mix(in srgb, var(--oui-yellow-0), var(--oui-yellow-6) 15%);
165
+ --oui-yellow-3: color-mix(in srgb, var(--oui-yellow-0), var(--oui-yellow-6) 30%);
166
+ --oui-yellow-4: color-mix(in srgb, var(--oui-yellow-0), var(--oui-yellow-6) 50%);
167
+ --oui-yellow-5: color-mix(in srgb, var(--oui-yellow-0), var(--oui-yellow-6) 75%);
168
+ --oui-yellow-6: #eb5;
169
+ --oui-yellow-7: color-mix(in srgb, var(--oui-yellow-10), var(--oui-yellow-6) 75%);
170
+ --oui-yellow-8: color-mix(in srgb, var(--oui-yellow-10), var(--oui-yellow-6) 50%);
171
+ --oui-yellow-9: color-mix(in srgb, var(--oui-yellow-10), var(--oui-yellow-6) 25%);
172
+ --oui-yellow-10: #320;
173
+ }
174
+ @media (prefers-color-scheme: dark) {
175
+ :root {
176
+ --oui-yellow-0: #281f00;
177
+ --oui-yellow-6: #b93;
178
+ --oui-yellow-10: #dcdad4;
179
+ }
180
+ }
package/dist/css/flex.css CHANGED
@@ -1,3 +1,4 @@
1
+ /*! https://github.com/oscarpalmer/oui */
1
2
  :where(.fill) {
2
3
  flex: 1;
3
4
  }
package/dist/css/mixins.css ADDED
@@ -0,0 +1 @@
1
+
package/package.json CHANGED
@@ -32,8 +32,9 @@
32
32
  "url": "git+https://github.com/oscarpalmer/oui.git"
33
33
  },
34
34
  "scripts": {
35
- "build": "npx sass ./src/css:./dist/css --no-source-map"
35
+ "build": "npx sass ./src/css:./dist/css --no-source-map",
36
+ "watch": "npx sass ./src/css:./dist/css --no-source-map --watch"
36
37
  },
37
38
  "type": "module",
38
- "version": "0.1.0"
39
+ "version": "0.2.0"
39
40
  }
package/src/css/colours.scss ADDED
@@ -0,0 +1,13 @@
1
+ @use './mixins' as mixins;
2
+
3
+ :root {
4
+ @include mixins.colour('blue', '#f8fafd', '#8ad', '#123', '#012', '#47a', '#d8dadd');
5
+ @include mixins.colour('green', '#f8fbf6', '#8b6', '#231', '#0a1a0a', '#794', '#d8dbd6');
6
+ @include mixins.colour('grey', '#f8f8f8', '#888', '#222', '#111', '#555', '#d8d8d8');
7
+ @include mixins.colour('orange', '#fef7f5', '#e85', '#420', '#2a1500', '#950', '#ded7d5');
8
+ @include mixins.colour('purple', '#fbf7fa', '#b8a', '#313', '#1a0a1a', '#858', '#dbd7da');
9
+ @include mixins.colour('slate', '#f6f7f8', '#708090', '#242f2f', '#011', '#405060', '#d6d7d8');
10
+ @include mixins.colour('stone', '#f8f8f6', '#928e85', '#2f2f24', '#110', '#625e55', '#d8d8d6');
11
+ @include mixins.colour('red', '#fdf5f6', '#d56', '#422', '#200', '#823', '#ddd5d6');
12
+ @include mixins.colour('yellow', '#fcfaf4', '#eb5', '#320', '#281f00', '#b93', '#dcdad4');
13
+ }
package/src/css/mixins.scss ADDED
@@ -0,0 +1,23 @@
1
+ @mixin colour($name, $zero, $six, $ten, $dark-zero, $dark-six, $dark-ten) {
2
+ & {
3
+ --oui-#{$name}-0: #{$zero};
4
+ --oui-#{$name}-1: color-mix(in srgb, var(--oui-#{$name}-0), var(--oui-#{$name}-6) 5%);
5
+ --oui-#{$name}-2: color-mix(in srgb, var(--oui-#{$name}-0), var(--oui-#{$name}-6) 15%);
6
+ --oui-#{$name}-3: color-mix(in srgb, var(--oui-#{$name}-0), var(--oui-#{$name}-6) 30%);
7
+ --oui-#{$name}-4: color-mix(in srgb, var(--oui-#{$name}-0), var(--oui-#{$name}-6) 50%);
8
+ --oui-#{$name}-5: color-mix(in srgb, var(--oui-#{$name}-0), var(--oui-#{$name}-6) 75%);
9
+ --oui-#{$name}-6: #{$six};
10
+ --oui-#{$name}-7: color-mix(in srgb, var(--oui-#{$name}-10), var(--oui-#{$name}-6) 75%);
11
+ --oui-#{$name}-8: color-mix(in srgb, var(--oui-#{$name}-10), var(--oui-#{$name}-6) 50%);
12
+ --oui-#{$name}-9: color-mix(in srgb, var(--oui-#{$name}-10), var(--oui-#{$name}-6) 25%);
13
+ --oui-#{$name}-10: #{$ten};
14
+
15
+ @media (prefers-color-scheme: dark) {
16
+ & {
17
+ --oui-#{$name}-0: #{$dark-zero};
18
+ --oui-#{$name}-6: #{$dark-six};
19
+ --oui-#{$name}-10: #{$dark-ten};
20
+ }
21
+ }
22
+ }
23
+ }