@oscarpalmer/oui 0.1.0 → 0.3.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 (8) hide show
  1. package/README.md +1 -1
  2. package/dist/css/a11y.css +1 -0
  3. package/dist/css/colours.css +182 -0
  4. package/dist/css/flex.css +1 -0
  5. package/dist/css/mixins.css +1 -0
  6. package/package.json +3 -2
  7. package/src/css/colours.scss +15 -0
  8. package/src/css/mixins.scss +25 -0
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Oui
2
2
 
3
- _Oui_ is a collection of styles, components, and related thingamjigs for designing websites and applications, which I often use to build prototypes and proof-of-concepts for myself and at work.
3
+ _Oui_ _(Oscar UI)_ is a collection of styles, components, and related thingamjigs for designing websites and applications, which I often use to build prototypes and proof-of-concepts for myself and at work.
4
4
 
5
5
  ## License
6
6
 
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,182 @@
1
+ /*! https://github.com/oscarpalmer/oui */
2
+ /*! https://github.com/oscarpalmer/oui */
3
+ :root {
4
+ --oui-blue-0: #f4f8fd;
5
+ --oui-blue-1: color-mix(in srgb, var(--oui-blue-0), var(--oui-blue-6) 5%);
6
+ --oui-blue-2: color-mix(in srgb, var(--oui-blue-0), var(--oui-blue-6) 15%);
7
+ --oui-blue-3: color-mix(in srgb, var(--oui-blue-0), var(--oui-blue-6) 30%);
8
+ --oui-blue-4: color-mix(in srgb, var(--oui-blue-0), var(--oui-blue-6) 50%);
9
+ --oui-blue-5: color-mix(in srgb, var(--oui-blue-0), var(--oui-blue-6) 75%);
10
+ --oui-blue-6: #48d;
11
+ --oui-blue-7: color-mix(in srgb, var(--oui-blue-10), var(--oui-blue-6) 75%);
12
+ --oui-blue-8: color-mix(in srgb, var(--oui-blue-10), var(--oui-blue-6) 50%);
13
+ --oui-blue-9: color-mix(in srgb, var(--oui-blue-10), var(--oui-blue-6) 25%);
14
+ --oui-blue-10: #123;
15
+ }
16
+ @media (prefers-color-scheme: dark) {
17
+ :root {
18
+ --oui-blue-0: #012;
19
+ --oui-blue-6: #15a;
20
+ --oui-blue-10: #d1d5da;
21
+ }
22
+ }
23
+ :root {
24
+ --oui-green-0: #f4fbf5;
25
+ --oui-green-1: color-mix(in srgb, var(--oui-green-0), var(--oui-green-6) 5%);
26
+ --oui-green-2: color-mix(in srgb, var(--oui-green-0), var(--oui-green-6) 15%);
27
+ --oui-green-3: color-mix(in srgb, var(--oui-green-0), var(--oui-green-6) 30%);
28
+ --oui-green-4: color-mix(in srgb, var(--oui-green-0), var(--oui-green-6) 50%);
29
+ --oui-green-5: color-mix(in srgb, var(--oui-green-0), var(--oui-green-6) 75%);
30
+ --oui-green-6: #4b5;
31
+ --oui-green-7: color-mix(in srgb, var(--oui-green-10), var(--oui-green-6) 75%);
32
+ --oui-green-8: color-mix(in srgb, var(--oui-green-10), var(--oui-green-6) 50%);
33
+ --oui-green-9: color-mix(in srgb, var(--oui-green-10), var(--oui-green-6) 25%);
34
+ --oui-green-10: #231;
35
+ }
36
+ @media (prefers-color-scheme: dark) {
37
+ :root {
38
+ --oui-green-0: #0a1a0a;
39
+ --oui-green-6: #182;
40
+ --oui-green-10: #d1d8d2;
41
+ }
42
+ }
43
+ :root {
44
+ --oui-grey-0: #f8f8f8;
45
+ --oui-grey-1: color-mix(in srgb, var(--oui-grey-0), var(--oui-grey-6) 5%);
46
+ --oui-grey-2: color-mix(in srgb, var(--oui-grey-0), var(--oui-grey-6) 15%);
47
+ --oui-grey-3: color-mix(in srgb, var(--oui-grey-0), var(--oui-grey-6) 30%);
48
+ --oui-grey-4: color-mix(in srgb, var(--oui-grey-0), var(--oui-grey-6) 50%);
49
+ --oui-grey-5: color-mix(in srgb, var(--oui-grey-0), var(--oui-grey-6) 75%);
50
+ --oui-grey-6: #888;
51
+ --oui-grey-7: color-mix(in srgb, var(--oui-grey-10), var(--oui-grey-6) 75%);
52
+ --oui-grey-8: color-mix(in srgb, var(--oui-grey-10), var(--oui-grey-6) 50%);
53
+ --oui-grey-9: color-mix(in srgb, var(--oui-grey-10), var(--oui-grey-6) 25%);
54
+ --oui-grey-10: #222;
55
+ }
56
+ @media (prefers-color-scheme: dark) {
57
+ :root {
58
+ --oui-grey-0: #111;
59
+ --oui-grey-6: #555;
60
+ --oui-grey-10: #d8d8d8;
61
+ }
62
+ }
63
+ :root {
64
+ --oui-orange-0: #fef7f2;
65
+ --oui-orange-1: color-mix(in srgb, var(--oui-orange-0), var(--oui-orange-6) 5%);
66
+ --oui-orange-2: color-mix(in srgb, var(--oui-orange-0), var(--oui-orange-6) 15%);
67
+ --oui-orange-3: color-mix(in srgb, var(--oui-orange-0), var(--oui-orange-6) 30%);
68
+ --oui-orange-4: color-mix(in srgb, var(--oui-orange-0), var(--oui-orange-6) 50%);
69
+ --oui-orange-5: color-mix(in srgb, var(--oui-orange-0), var(--oui-orange-6) 75%);
70
+ --oui-orange-6: #e72;
71
+ --oui-orange-7: color-mix(in srgb, var(--oui-orange-10), var(--oui-orange-6) 75%);
72
+ --oui-orange-8: color-mix(in srgb, var(--oui-orange-10), var(--oui-orange-6) 50%);
73
+ --oui-orange-9: color-mix(in srgb, var(--oui-orange-10), var(--oui-orange-6) 25%);
74
+ --oui-orange-10: #420;
75
+ }
76
+ @media (prefers-color-scheme: dark) {
77
+ :root {
78
+ --oui-orange-0: #2a1500;
79
+ --oui-orange-6: #b40;
80
+ --oui-orange-10: #dbd4d0;
81
+ }
82
+ }
83
+ :root {
84
+ --oui-purple-0: #fcf7fb;
85
+ --oui-purple-1: color-mix(in srgb, var(--oui-purple-0), var(--oui-purple-6) 5%);
86
+ --oui-purple-2: color-mix(in srgb, var(--oui-purple-0), var(--oui-purple-6) 15%);
87
+ --oui-purple-3: color-mix(in srgb, var(--oui-purple-0), var(--oui-purple-6) 30%);
88
+ --oui-purple-4: color-mix(in srgb, var(--oui-purple-0), var(--oui-purple-6) 50%);
89
+ --oui-purple-5: color-mix(in srgb, var(--oui-purple-0), var(--oui-purple-6) 75%);
90
+ --oui-purple-6: #c7b;
91
+ --oui-purple-7: color-mix(in srgb, var(--oui-purple-10), var(--oui-purple-6) 75%);
92
+ --oui-purple-8: color-mix(in srgb, var(--oui-purple-10), var(--oui-purple-6) 50%);
93
+ --oui-purple-9: color-mix(in srgb, var(--oui-purple-10), var(--oui-purple-6) 25%);
94
+ --oui-purple-10: #313;
95
+ }
96
+ @media (prefers-color-scheme: dark) {
97
+ :root {
98
+ --oui-purple-0: #1a0a1a;
99
+ --oui-purple-6: #94a;
100
+ --oui-purple-10: #d9d4da;
101
+ }
102
+ }
103
+ :root {
104
+ --oui-slate-0: #f6f7f8;
105
+ --oui-slate-1: color-mix(in srgb, var(--oui-slate-0), var(--oui-slate-6) 5%);
106
+ --oui-slate-2: color-mix(in srgb, var(--oui-slate-0), var(--oui-slate-6) 15%);
107
+ --oui-slate-3: color-mix(in srgb, var(--oui-slate-0), var(--oui-slate-6) 30%);
108
+ --oui-slate-4: color-mix(in srgb, var(--oui-slate-0), var(--oui-slate-6) 50%);
109
+ --oui-slate-5: color-mix(in srgb, var(--oui-slate-0), var(--oui-slate-6) 75%);
110
+ --oui-slate-6: #708090;
111
+ --oui-slate-7: color-mix(in srgb, var(--oui-slate-10), var(--oui-slate-6) 75%);
112
+ --oui-slate-8: color-mix(in srgb, var(--oui-slate-10), var(--oui-slate-6) 50%);
113
+ --oui-slate-9: color-mix(in srgb, var(--oui-slate-10), var(--oui-slate-6) 25%);
114
+ --oui-slate-10: #242f2f;
115
+ }
116
+ @media (prefers-color-scheme: dark) {
117
+ :root {
118
+ --oui-slate-0: #011;
119
+ --oui-slate-6: #405060;
120
+ --oui-slate-10: #d6d7d8;
121
+ }
122
+ }
123
+ :root {
124
+ --oui-stone-0: #f8f8f6;
125
+ --oui-stone-1: color-mix(in srgb, var(--oui-stone-0), var(--oui-stone-6) 5%);
126
+ --oui-stone-2: color-mix(in srgb, var(--oui-stone-0), var(--oui-stone-6) 15%);
127
+ --oui-stone-3: color-mix(in srgb, var(--oui-stone-0), var(--oui-stone-6) 30%);
128
+ --oui-stone-4: color-mix(in srgb, var(--oui-stone-0), var(--oui-stone-6) 50%);
129
+ --oui-stone-5: color-mix(in srgb, var(--oui-stone-0), var(--oui-stone-6) 75%);
130
+ --oui-stone-6: #928e85;
131
+ --oui-stone-7: color-mix(in srgb, var(--oui-stone-10), var(--oui-stone-6) 75%);
132
+ --oui-stone-8: color-mix(in srgb, var(--oui-stone-10), var(--oui-stone-6) 50%);
133
+ --oui-stone-9: color-mix(in srgb, var(--oui-stone-10), var(--oui-stone-6) 25%);
134
+ --oui-stone-10: #2f2f24;
135
+ }
136
+ @media (prefers-color-scheme: dark) {
137
+ :root {
138
+ --oui-stone-0: #110;
139
+ --oui-stone-6: #625e55;
140
+ --oui-stone-10: #d8d8d6;
141
+ }
142
+ }
143
+ :root {
144
+ --oui-red-0: #fdf4f4;
145
+ --oui-red-1: color-mix(in srgb, var(--oui-red-0), var(--oui-red-6) 5%);
146
+ --oui-red-2: color-mix(in srgb, var(--oui-red-0), var(--oui-red-6) 15%);
147
+ --oui-red-3: color-mix(in srgb, var(--oui-red-0), var(--oui-red-6) 30%);
148
+ --oui-red-4: color-mix(in srgb, var(--oui-red-0), var(--oui-red-6) 50%);
149
+ --oui-red-5: color-mix(in srgb, var(--oui-red-0), var(--oui-red-6) 75%);
150
+ --oui-red-6: #d44;
151
+ --oui-red-7: color-mix(in srgb, var(--oui-red-10), var(--oui-red-6) 75%);
152
+ --oui-red-8: color-mix(in srgb, var(--oui-red-10), var(--oui-red-6) 50%);
153
+ --oui-red-9: color-mix(in srgb, var(--oui-red-10), var(--oui-red-6) 25%);
154
+ --oui-red-10: #422;
155
+ }
156
+ @media (prefers-color-scheme: dark) {
157
+ :root {
158
+ --oui-red-0: #200;
159
+ --oui-red-6: #a11;
160
+ --oui-red-10: #dad1d1;
161
+ }
162
+ }
163
+ :root {
164
+ --oui-yellow-0: #fefbf0;
165
+ --oui-yellow-1: color-mix(in srgb, var(--oui-yellow-0), var(--oui-yellow-6) 5%);
166
+ --oui-yellow-2: color-mix(in srgb, var(--oui-yellow-0), var(--oui-yellow-6) 15%);
167
+ --oui-yellow-3: color-mix(in srgb, var(--oui-yellow-0), var(--oui-yellow-6) 30%);
168
+ --oui-yellow-4: color-mix(in srgb, var(--oui-yellow-0), var(--oui-yellow-6) 50%);
169
+ --oui-yellow-5: color-mix(in srgb, var(--oui-yellow-0), var(--oui-yellow-6) 75%);
170
+ --oui-yellow-6: #eb0;
171
+ --oui-yellow-7: color-mix(in srgb, var(--oui-yellow-10), var(--oui-yellow-6) 75%);
172
+ --oui-yellow-8: color-mix(in srgb, var(--oui-yellow-10), var(--oui-yellow-6) 50%);
173
+ --oui-yellow-9: color-mix(in srgb, var(--oui-yellow-10), var(--oui-yellow-6) 25%);
174
+ --oui-yellow-10: #320;
175
+ }
176
+ @media (prefers-color-scheme: dark) {
177
+ :root {
178
+ --oui-yellow-0: #281f00;
179
+ --oui-yellow-6: #b80;
180
+ --oui-yellow-10: #dbd8d0;
181
+ }
182
+ }
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
+ /*! https://github.com/oscarpalmer/oui */
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.3.0"
39
40
  }
package/src/css/colours.scss ADDED
@@ -0,0 +1,15 @@
1
+ /*! https://github.com/oscarpalmer/oui */
2
+
3
+ @use './mixins' as mixins;
4
+
5
+ :root {
6
+ @include mixins.colour('blue', '#f4f8fd', '#48d', '#123', '#012', '#15a', '#d1d5da');
7
+ @include mixins.colour('green', '#f4fbf5', '#4b5', '#231', '#0a1a0a', '#182', '#d1d8d2');
8
+ @include mixins.colour('grey', '#f8f8f8', '#888', '#222', '#111', '#555', '#d8d8d8');
9
+ @include mixins.colour('orange', '#fef7f2', '#e72', '#420', '#2a1500', '#b40', '#dbd4d0');
10
+ @include mixins.colour('purple', '#fcf7fb', '#c7b', '#313', '#1a0a1a', '#94a', '#d9d4da');
11
+ @include mixins.colour('slate', '#f6f7f8', '#708090', '#242f2f', '#011', '#405060', '#d6d7d8');
12
+ @include mixins.colour('stone', '#f8f8f6', '#928e85', '#2f2f24', '#110', '#625e55', '#d8d8d6');
13
+ @include mixins.colour('red', '#fdf4f4', '#d44', '#422', '#200', '#a11', '#dad1d1');
14
+ @include mixins.colour('yellow', '#fefbf0', '#eb0', '#320', '#281f00', '#b80', '#dbd8d0');
15
+ }
package/src/css/mixins.scss ADDED
@@ -0,0 +1,25 @@
1
+ /*! https://github.com/oscarpalmer/oui */
2
+
3
+ @mixin colour($name, $zero, $six, $ten, $dark-zero, $dark-six, $dark-ten) {
4
+ & {
5
+ --oui-#{$name}-0: #{$zero};
6
+ --oui-#{$name}-1: color-mix(in srgb, var(--oui-#{$name}-0), var(--oui-#{$name}-6) 5%);
7
+ --oui-#{$name}-2: color-mix(in srgb, var(--oui-#{$name}-0), var(--oui-#{$name}-6) 15%);
8
+ --oui-#{$name}-3: color-mix(in srgb, var(--oui-#{$name}-0), var(--oui-#{$name}-6) 30%);
9
+ --oui-#{$name}-4: color-mix(in srgb, var(--oui-#{$name}-0), var(--oui-#{$name}-6) 50%);
10
+ --oui-#{$name}-5: color-mix(in srgb, var(--oui-#{$name}-0), var(--oui-#{$name}-6) 75%);
11
+ --oui-#{$name}-6: #{$six};
12
+ --oui-#{$name}-7: color-mix(in srgb, var(--oui-#{$name}-10), var(--oui-#{$name}-6) 75%);
13
+ --oui-#{$name}-8: color-mix(in srgb, var(--oui-#{$name}-10), var(--oui-#{$name}-6) 50%);
14
+ --oui-#{$name}-9: color-mix(in srgb, var(--oui-#{$name}-10), var(--oui-#{$name}-6) 25%);
15
+ --oui-#{$name}-10: #{$ten};
16
+
17
+ @media (prefers-color-scheme: dark) {
18
+ & {
19
+ --oui-#{$name}-0: #{$dark-zero};
20
+ --oui-#{$name}-6: #{$dark-six};
21
+ --oui-#{$name}-10: #{$dark-ten};
22
+ }
23
+ }
24
+ }
25
+ }