oneslash-design-system 2.0.0 → 2.0.2

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/dist/components/button.jsx +1 -1
  2. package/dist/components/iconButton.jsx +1 -1
  3. package/dist/components/textField.jsx +2 -2
  4. package/dist/components/textarea.jsx +1 -1
  5. package/dist/designTokens.d.ts +24 -0
  6. package/dist/designTokens.js +15 -4
  7. package/dist/tailwind-preset-auto.js +3 -0
  8. package/dist/tailwind-preset.js +3 -0
  9. package/dist/theme-auto.css +3 -0
  10. package/dist/theme.css +3 -0
  11. package/dist/themes/default-auto.css +9 -6
  12. package/dist/themes/default.css +7 -5
  13. package/dist/themes/forest-auto.css +9 -6
  14. package/dist/themes/forest.css +7 -5
  15. package/package.json +1 -1
package/dist/components/button.jsx CHANGED
@@ -26,7 +26,7 @@ export default function Button(_a) {
26
26
  var baseTypeClasses = {
27
27
  default: {
28
28
  primary: 'bg-accent-main text-accent-contrast',
29
- secondary: 'bg-secondary-main text-fg-primary',
29
+ secondary: 'bg-secondary-main text-secondary-contrast',
30
30
  tertiary: 'bg-background-accent100 text-fg-primary',
31
31
  textOnly: 'text-fg-primary',
32
32
  },
package/dist/components/iconButton.jsx CHANGED
@@ -55,7 +55,7 @@ export default function IconButton(_a) {
55
55
  : color === 'primary'
56
56
  ? 'text-accent-contrast' // Primary
57
57
  : color === 'secondary'
58
- ? 'text-fg-primary' // Secondary
58
+ ? 'text-secondary-contrast' // Secondary
59
59
  : color === 'tertiary'
60
60
  ? 'text-fg-primary' // Tertiary
61
61
  : 'text-fg-primary'; // iconOnly
package/dist/components/textField.jsx CHANGED
@@ -59,12 +59,12 @@ export default function TextField(_a) {
59
59
  };
60
60
  return (<div className="flex flex-col w-full">
61
61
  {label && (<label htmlFor={id} className="mb-1 text-body2 text-fg-secondary">
62
- {label}{required && <span className="text-error-main ml-0.5">*</span>}
62
+ {label}{required && <span className="text-error-text ml-0.5">*</span>}
63
63
  </label>)}
64
64
  <div className="relative">
65
65
  {multiline ? (<textarea id={id} rows={maxRows} className={containerClasses} value={value} onChange={onChange} placeholder={placeholder} onFocus={onFocus} onBlur={onBlur} onKeyDown={handleKeyDown} autoFocus={autoFocus} disabled={disabled} required={required} autoComplete="off" {...errorProps}/>) : (<input id={id} type={type} inputMode={getInputMode()} className={containerClasses} value={value} onChange={onChange} placeholder={placeholder} onFocus={onFocus} onBlur={onBlur} onKeyDown={handleKeyDown} autoFocus={autoFocus} disabled={disabled} required={required} autoComplete="off" {...errorProps}/>)}
66
66
  </div>
67
- {error && (<p id={errorId} className="mt-1 text-error-main text-body2">
67
+ {error && (<p id={errorId} className="mt-1 text-error-text text-body2">
68
68
  {errorText}
69
69
  </p>)}
70
70
  </div>);
package/dist/components/textarea.jsx CHANGED
@@ -67,7 +67,7 @@ export default function Textarea(_a) {
67
67
  <div className="relative">
68
68
  <textarea ref={textareaRef} id={id} rows={1} className={containerClasses} value={value} onChange={onChange} onInput={adjustHeight} placeholder={placeholder} onFocus={onFocus} onBlur={onBlur} onKeyDown={handleKeyDown} onCompositionStart={onCompositionStart} onCompositionEnd={onCompositionEnd} autoFocus={autoFocus} disabled={disabled} autoComplete="off" aria-invalid={error || undefined} aria-describedby={error ? errorId : undefined}/>
69
69
  </div>
70
- {error && (<p id={errorId} className="mt-1 text-error-main text-body2">
70
+ {error && (<p id={errorId} className="mt-1 text-error-text text-body2">
71
71
  {errorText}
72
72
  </p>)}
73
73
  </div>);
package/dist/designTokens.d.ts CHANGED
@@ -88,6 +88,12 @@ declare const defaultSets: {
88
88
  dark: string;
89
89
  light: string;
90
90
  };
91
+ secondary: {
92
+ contrast: string;
93
+ main: string;
94
+ dark: string;
95
+ light: string;
96
+ };
91
97
  background: {
92
98
  elevated: string;
93
99
  overlay: string;
@@ -234,6 +240,12 @@ declare const defaultSets: {
234
240
  dark: string;
235
241
  light: string;
236
242
  };
243
+ secondary: {
244
+ contrast: string;
245
+ main: string;
246
+ dark: string;
247
+ light: string;
248
+ };
237
249
  background: {
238
250
  elevated: string;
239
251
  overlay: string;
@@ -382,6 +394,12 @@ declare const forestSets: {
382
394
  dark: string;
383
395
  light: string;
384
396
  };
397
+ secondary: {
398
+ contrast: string;
399
+ main: string;
400
+ dark: string;
401
+ light: string;
402
+ };
385
403
  background: {
386
404
  elevated: string;
387
405
  overlay: string;
@@ -528,6 +546,12 @@ declare const forestSets: {
528
546
  dark: string;
529
547
  light: string;
530
548
  };
549
+ secondary: {
550
+ contrast: string;
551
+ main: string;
552
+ dark: string;
553
+ light: string;
554
+ };
531
555
  background: {
532
556
  elevated: string;
533
557
  overlay: string;
package/dist/designTokens.js CHANGED
@@ -39,7 +39,7 @@ var base = {
39
39
  },
40
40
  error: {
41
41
  main: '#D32F2F',
42
- dark: '#B22323',
42
+ dark: '#A82121', // 4.62:1 on alertBg (#B22323 was 4.27)
43
43
  light: '#F27777',
44
44
  alertBg: '#F2C4C4',
45
45
  contrast: '#FFFFFF',
@@ -126,7 +126,7 @@ var base = {
126
126
  dark: '#B22323',
127
127
  light: '#F27777',
128
128
  alertBg: '#5C1A1A',
129
- contrast: '#FFFFFF',
129
+ contrast: '#000000', // 5.5:1 on main (#FFFFFF was 3.79)
130
130
  },
131
131
  warning: {
132
132
  main: '#FF8C0A',
@@ -299,7 +299,9 @@ function withSemanticKeys(set, mode) {
299
299
  var isLight = mode === 'light';
300
300
  /** @param {typeof set.error} g @param {boolean} isError */
301
301
  var status = function (g, isError) { return (__assign(__assign({}, g), { fill: isLight ? g.dark : g.main, onFill: isLight ? '#FFFFFF' : '#000000', text: isLight ? g.dark : isError ? g.light : g.main, textHover: isLight ? g.dark : g.light, tint: isLight ? g.light : g.dark })); };
302
- return __assign(__assign({}, set), { primary: __assign(__assign({}, set.primary), { contrast: isLight ? '#ffffff' : '#000000' }), background: __assign(__assign({}, set.background), { elevated: isLight ? set.background.default : set.background.accent100, overlay: isLight ? set.background.accent300 : set.background.accent100 }), error: status(set.error, true), warning: status(set.warning, false), info: status(set.info, false), success: status(set.success, false) });
302
+ return __assign(__assign({}, set), { primary: __assign(__assign({}, set.primary), { contrast: isLight ? '#ffffff' : '#000000' }),
303
+ // Secondary buttons use text.primary as their label; a theme whose secondary.main is mid-tone sets its own.
304
+ secondary: __assign(__assign({}, set.secondary), { contrast: set.text.primary }), background: __assign(__assign({}, set.background), { elevated: isLight ? set.background.default : set.background.accent100, overlay: isLight ? set.background.accent300 : set.background.accent100 }), error: status(set.error, true), warning: status(set.warning, false), info: status(set.info, false), success: status(set.success, false) });
303
305
  }
304
306
  // Forest: the default set with these values replaced (group by group).
305
307
  /**
@@ -336,6 +338,15 @@ var forestDark = override(baseColors.dark, {
336
338
  * @returns {S}
337
339
  */
338
340
  var withForestInfoText = function (set) { return (__assign(__assign({}, set), { info: __assign(__assign({}, set.info), { text: '#0068A3', textHover: '#0068A3' }) })); };
341
+ // Forest's secondary.main (#6E7A5A) is mid-tone: its text.primary gives 3.5:1 and Scindo's cream 3.8:1, so the
342
+ // label is white (4.56:1) in both modes.
343
+ /**
344
+ * @template {typeof base.colors.light} S
345
+ * @param {S} set
346
+ * @param {string} contrast
347
+ * @returns {S}
348
+ */
349
+ var withSecondaryContrast = function (set, contrast) { return (__assign(__assign({}, set), { secondary: __assign(__assign({}, set.secondary), { contrast: contrast }) })); };
339
350
  // Tooltips are inverted surfaces: each mode takes the other mode's accent300 and text.primary of the same theme.
340
351
  /**
341
352
  * @template {typeof base.colors.light} S
@@ -348,5 +359,5 @@ var withTooltips = function (light, dark) { return ({
348
359
  dark: __assign(__assign({}, dark), { misc: __assign(__assign({}, dark.misc), { tooltipBg: light.background.accent300, tooltipText: light.text.primary }) }),
349
360
  }); };
350
361
  var defaultSets = withTooltips(withSemanticKeys(baseColors.light, 'light'), withSemanticKeys(baseColors.dark, 'dark'));
351
- var forestSets = withTooltips(withForestInfoText(withSemanticKeys(forestLight, 'light')), withSemanticKeys(forestDark, 'dark'));
362
+ var forestSets = withTooltips(withSecondaryContrast(withForestInfoText(withSemanticKeys(forestLight, 'light')), '#FFFFFF'), withSecondaryContrast(withSemanticKeys(forestDark, 'dark'), '#FFFFFF'));
352
363
  module.exports = __assign(__assign({}, base), { colors: defaultSets, themes: { forest: forestSets } });
package/dist/tailwind-preset-auto.js CHANGED
@@ -56,6 +56,9 @@ module.exports = {
56
56
  "secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
57
57
  "light-secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
58
58
  "dark-secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
59
+ "secondary-contrast": "rgb(var(--os-color-secondary-contrast) / <alpha-value>)",
60
+ "light-secondary-contrast": "rgb(var(--os-color-secondary-contrast) / <alpha-value>)",
61
+ "dark-secondary-contrast": "rgb(var(--os-color-secondary-contrast) / <alpha-value>)",
59
62
  "error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
60
63
  "light-error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
61
64
  "dark-error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
package/dist/tailwind-preset.js CHANGED
@@ -50,6 +50,9 @@ module.exports = {
50
50
  "secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
51
51
  "light-secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
52
52
  "dark-secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
53
+ "secondary-contrast": "rgb(var(--os-color-secondary-contrast) / <alpha-value>)",
54
+ "light-secondary-contrast": "rgb(var(--os-color-secondary-contrast) / <alpha-value>)",
55
+ "dark-secondary-contrast": "rgb(var(--os-color-secondary-contrast) / <alpha-value>)",
53
56
  "error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
54
57
  "light-error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
55
58
  "dark-error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
package/dist/theme-auto.css CHANGED
@@ -53,6 +53,9 @@
53
53
  --color-secondary-light: rgb(var(--os-color-secondary-light));
54
54
  --color-light-secondary-light: rgb(var(--os-color-secondary-light));
55
55
  --color-dark-secondary-light: rgb(var(--os-color-secondary-light));
56
+ --color-secondary-contrast: rgb(var(--os-color-secondary-contrast));
57
+ --color-light-secondary-contrast: rgb(var(--os-color-secondary-contrast));
58
+ --color-dark-secondary-contrast: rgb(var(--os-color-secondary-contrast));
56
59
  --color-error-main: rgb(var(--os-color-error-main));
57
60
  --color-light-error-main: rgb(var(--os-color-error-main));
58
61
  --color-dark-error-main: rgb(var(--os-color-error-main));
package/dist/theme.css CHANGED
@@ -48,6 +48,9 @@
48
48
  --color-secondary-light: rgb(var(--os-color-secondary-light));
49
49
  --color-light-secondary-light: rgb(var(--os-color-secondary-light));
50
50
  --color-dark-secondary-light: rgb(var(--os-color-secondary-light));
51
+ --color-secondary-contrast: rgb(var(--os-color-secondary-contrast));
52
+ --color-light-secondary-contrast: rgb(var(--os-color-secondary-contrast));
53
+ --color-dark-secondary-contrast: rgb(var(--os-color-secondary-contrast));
51
54
  --color-error-main: rgb(var(--os-color-error-main));
52
55
  --color-light-error-main: rgb(var(--os-color-error-main));
53
56
  --color-dark-error-main: rgb(var(--os-color-error-main));
package/dist/themes/default-auto.css CHANGED
@@ -18,15 +18,16 @@
18
18
  --os-color-secondary-main: 176 176 176;
19
19
  --os-color-secondary-dark: 136 136 136;
20
20
  --os-color-secondary-light: 209 209 209;
21
+ --os-color-secondary-contrast: 0 0 0;
21
22
  --os-color-error-main: 211 47 47;
22
- --os-color-error-dark: 178 35 35;
23
+ --os-color-error-dark: 168 33 33;
23
24
  --os-color-error-light: 242 119 119;
24
25
  --os-color-error-alertBg: 242 196 196;
25
26
  --os-color-error-contrast: 255 255 255;
26
- --os-color-error-fill: 178 35 35;
27
+ --os-color-error-fill: 168 33 33;
27
28
  --os-color-error-onFill: 255 255 255;
28
- --os-color-error-text: 178 35 35;
29
- --os-color-error-textHover: 178 35 35;
29
+ --os-color-error-text: 168 33 33;
30
+ --os-color-error-textHover: 168 33 33;
30
31
  --os-color-error-tint: 242 119 119;
31
32
  --os-color-warning-main: 239 108 0;
32
33
  --os-color-warning-dark: 168 70 0;
@@ -99,11 +100,12 @@
99
100
  --os-color-secondary-main: 79 79 79;
100
101
  --os-color-secondary-dark: 69 69 69;
101
102
  --os-color-secondary-light: 109 109 109;
103
+ --os-color-secondary-contrast: 238 238 238;
102
104
  --os-color-error-main: 231 76 76;
103
105
  --os-color-error-dark: 178 35 35;
104
106
  --os-color-error-light: 242 119 119;
105
107
  --os-color-error-alertBg: 92 26 26;
106
- --os-color-error-contrast: 255 255 255;
108
+ --os-color-error-contrast: 0 0 0;
107
109
  --os-color-error-fill: 231 76 76;
108
110
  --os-color-error-onFill: 0 0 0;
109
111
  --os-color-error-text: 242 119 119;
@@ -181,11 +183,12 @@
181
183
  --os-color-secondary-main: 79 79 79;
182
184
  --os-color-secondary-dark: 69 69 69;
183
185
  --os-color-secondary-light: 109 109 109;
186
+ --os-color-secondary-contrast: 238 238 238;
184
187
  --os-color-error-main: 231 76 76;
185
188
  --os-color-error-dark: 178 35 35;
186
189
  --os-color-error-light: 242 119 119;
187
190
  --os-color-error-alertBg: 92 26 26;
188
- --os-color-error-contrast: 255 255 255;
191
+ --os-color-error-contrast: 0 0 0;
189
192
  --os-color-error-fill: 231 76 76;
190
193
  --os-color-error-onFill: 0 0 0;
191
194
  --os-color-error-text: 242 119 119;
package/dist/themes/default.css CHANGED
@@ -18,15 +18,16 @@
18
18
  --os-color-secondary-main: 176 176 176;
19
19
  --os-color-secondary-dark: 136 136 136;
20
20
  --os-color-secondary-light: 209 209 209;
21
+ --os-color-secondary-contrast: 0 0 0;
21
22
  --os-color-error-main: 211 47 47;
22
- --os-color-error-dark: 178 35 35;
23
+ --os-color-error-dark: 168 33 33;
23
24
  --os-color-error-light: 242 119 119;
24
25
  --os-color-error-alertBg: 242 196 196;
25
26
  --os-color-error-contrast: 255 255 255;
26
- --os-color-error-fill: 178 35 35;
27
+ --os-color-error-fill: 168 33 33;
27
28
  --os-color-error-onFill: 255 255 255;
28
- --os-color-error-text: 178 35 35;
29
- --os-color-error-textHover: 178 35 35;
29
+ --os-color-error-text: 168 33 33;
30
+ --os-color-error-textHover: 168 33 33;
30
31
  --os-color-error-tint: 242 119 119;
31
32
  --os-color-warning-main: 239 108 0;
32
33
  --os-color-warning-dark: 168 70 0;
@@ -99,11 +100,12 @@
99
100
  --os-color-secondary-main: 79 79 79;
100
101
  --os-color-secondary-dark: 69 69 69;
101
102
  --os-color-secondary-light: 109 109 109;
103
+ --os-color-secondary-contrast: 238 238 238;
102
104
  --os-color-error-main: 231 76 76;
103
105
  --os-color-error-dark: 178 35 35;
104
106
  --os-color-error-light: 242 119 119;
105
107
  --os-color-error-alertBg: 92 26 26;
106
- --os-color-error-contrast: 255 255 255;
108
+ --os-color-error-contrast: 0 0 0;
107
109
  --os-color-error-fill: 231 76 76;
108
110
  --os-color-error-onFill: 0 0 0;
109
111
  --os-color-error-text: 242 119 119;
package/dist/themes/forest-auto.css CHANGED
@@ -18,15 +18,16 @@
18
18
  --os-color-secondary-main: 110 122 90;
19
19
  --os-color-secondary-dark: 93 104 73;
20
20
  --os-color-secondary-light: 130 141 107;
21
+ --os-color-secondary-contrast: 255 255 255;
21
22
  --os-color-error-main: 211 47 47;
22
- --os-color-error-dark: 178 35 35;
23
+ --os-color-error-dark: 168 33 33;
23
24
  --os-color-error-light: 242 119 119;
24
25
  --os-color-error-alertBg: 242 196 196;
25
26
  --os-color-error-contrast: 255 255 255;
26
- --os-color-error-fill: 178 35 35;
27
+ --os-color-error-fill: 168 33 33;
27
28
  --os-color-error-onFill: 255 255 255;
28
- --os-color-error-text: 178 35 35;
29
- --os-color-error-textHover: 178 35 35;
29
+ --os-color-error-text: 168 33 33;
30
+ --os-color-error-textHover: 168 33 33;
30
31
  --os-color-error-tint: 242 119 119;
31
32
  --os-color-warning-main: 239 108 0;
32
33
  --os-color-warning-dark: 168 70 0;
@@ -99,11 +100,12 @@
99
100
  --os-color-secondary-main: 110 122 90;
100
101
  --os-color-secondary-dark: 93 104 73;
101
102
  --os-color-secondary-light: 130 141 107;
103
+ --os-color-secondary-contrast: 255 255 255;
102
104
  --os-color-error-main: 231 76 76;
103
105
  --os-color-error-dark: 178 35 35;
104
106
  --os-color-error-light: 242 119 119;
105
107
  --os-color-error-alertBg: 92 26 26;
106
- --os-color-error-contrast: 255 255 255;
108
+ --os-color-error-contrast: 0 0 0;
107
109
  --os-color-error-fill: 231 76 76;
108
110
  --os-color-error-onFill: 0 0 0;
109
111
  --os-color-error-text: 242 119 119;
@@ -181,11 +183,12 @@
181
183
  --os-color-secondary-main: 110 122 90;
182
184
  --os-color-secondary-dark: 93 104 73;
183
185
  --os-color-secondary-light: 130 141 107;
186
+ --os-color-secondary-contrast: 255 255 255;
184
187
  --os-color-error-main: 231 76 76;
185
188
  --os-color-error-dark: 178 35 35;
186
189
  --os-color-error-light: 242 119 119;
187
190
  --os-color-error-alertBg: 92 26 26;
188
- --os-color-error-contrast: 255 255 255;
191
+ --os-color-error-contrast: 0 0 0;
189
192
  --os-color-error-fill: 231 76 76;
190
193
  --os-color-error-onFill: 0 0 0;
191
194
  --os-color-error-text: 242 119 119;
package/dist/themes/forest.css CHANGED
@@ -18,15 +18,16 @@
18
18
  --os-color-secondary-main: 110 122 90;
19
19
  --os-color-secondary-dark: 93 104 73;
20
20
  --os-color-secondary-light: 130 141 107;
21
+ --os-color-secondary-contrast: 255 255 255;
21
22
  --os-color-error-main: 211 47 47;
22
- --os-color-error-dark: 178 35 35;
23
+ --os-color-error-dark: 168 33 33;
23
24
  --os-color-error-light: 242 119 119;
24
25
  --os-color-error-alertBg: 242 196 196;
25
26
  --os-color-error-contrast: 255 255 255;
26
- --os-color-error-fill: 178 35 35;
27
+ --os-color-error-fill: 168 33 33;
27
28
  --os-color-error-onFill: 255 255 255;
28
- --os-color-error-text: 178 35 35;
29
- --os-color-error-textHover: 178 35 35;
29
+ --os-color-error-text: 168 33 33;
30
+ --os-color-error-textHover: 168 33 33;
30
31
  --os-color-error-tint: 242 119 119;
31
32
  --os-color-warning-main: 239 108 0;
32
33
  --os-color-warning-dark: 168 70 0;
@@ -99,11 +100,12 @@
99
100
  --os-color-secondary-main: 110 122 90;
100
101
  --os-color-secondary-dark: 93 104 73;
101
102
  --os-color-secondary-light: 130 141 107;
103
+ --os-color-secondary-contrast: 255 255 255;
102
104
  --os-color-error-main: 231 76 76;
103
105
  --os-color-error-dark: 178 35 35;
104
106
  --os-color-error-light: 242 119 119;
105
107
  --os-color-error-alertBg: 92 26 26;
106
- --os-color-error-contrast: 255 255 255;
108
+ --os-color-error-contrast: 0 0 0;
107
109
  --os-color-error-fill: 231 76 76;
108
110
  --os-color-error-onFill: 0 0 0;
109
111
  --os-color-error-text: 242 119 119;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "oneslash-design-system",
3
3
  "description": "A design system for the Oneslash projects",
4
- "version": "2.0.0",
4
+ "version": "2.0.2",
5
5
  "private": false,
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",