oneslash-design-system 2.0.1 → 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.
- package/dist/components/textField.jsx +2 -2
- package/dist/components/textarea.jsx +1 -1
- package/dist/designTokens.js +5 -5
- package/dist/themes/default-auto.css +6 -6
- package/dist/themes/default.css +5 -5
- package/dist/themes/forest-auto.css +9 -9
- package/dist/themes/forest.css +7 -7
- package/package.json +1 -1
|
@@ -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-
|
|
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-
|
|
67
|
+
{error && (<p id={errorId} className="mt-1 text-error-text text-body2">
|
|
68
68
|
{errorText}
|
|
69
69
|
</p>)}
|
|
70
70
|
</div>);
|
|
@@ -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-
|
|
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.js
CHANGED
|
@@ -39,7 +39,7 @@ var base = {
|
|
|
39
39
|
},
|
|
40
40
|
error: {
|
|
41
41
|
main: '#D32F2F',
|
|
42
|
-
dark: '#
|
|
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: '#
|
|
129
|
+
contrast: '#000000', // 5.5:1 on main (#FFFFFF was 3.79)
|
|
130
130
|
},
|
|
131
131
|
warning: {
|
|
132
132
|
main: '#FF8C0A',
|
|
@@ -338,8 +338,8 @@ var forestDark = override(baseColors.dark, {
|
|
|
338
338
|
* @returns {S}
|
|
339
339
|
*/
|
|
340
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
|
|
342
|
-
//
|
|
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
343
|
/**
|
|
344
344
|
* @template {typeof base.colors.light} S
|
|
345
345
|
* @param {S} set
|
|
@@ -359,5 +359,5 @@ var withTooltips = function (light, dark) { return ({
|
|
|
359
359
|
dark: __assign(__assign({}, dark), { misc: __assign(__assign({}, dark.misc), { tooltipBg: light.background.accent300, tooltipText: light.text.primary }) }),
|
|
360
360
|
}); };
|
|
361
361
|
var defaultSets = withTooltips(withSemanticKeys(baseColors.light, 'light'), withSemanticKeys(baseColors.dark, 'dark'));
|
|
362
|
-
var forestSets = withTooltips(withSecondaryContrast(withForestInfoText(withSemanticKeys(forestLight, 'light')), '#
|
|
362
|
+
var forestSets = withTooltips(withSecondaryContrast(withForestInfoText(withSemanticKeys(forestLight, 'light')), '#FFFFFF'), withSecondaryContrast(withSemanticKeys(forestDark, 'dark'), '#FFFFFF'));
|
|
363
363
|
module.exports = __assign(__assign({}, base), { colors: defaultSets, themes: { forest: forestSets } });
|
|
@@ -20,14 +20,14 @@
|
|
|
20
20
|
--os-color-secondary-light: 209 209 209;
|
|
21
21
|
--os-color-secondary-contrast: 0 0 0;
|
|
22
22
|
--os-color-error-main: 211 47 47;
|
|
23
|
-
--os-color-error-dark:
|
|
23
|
+
--os-color-error-dark: 168 33 33;
|
|
24
24
|
--os-color-error-light: 242 119 119;
|
|
25
25
|
--os-color-error-alertBg: 242 196 196;
|
|
26
26
|
--os-color-error-contrast: 255 255 255;
|
|
27
|
-
--os-color-error-fill:
|
|
27
|
+
--os-color-error-fill: 168 33 33;
|
|
28
28
|
--os-color-error-onFill: 255 255 255;
|
|
29
|
-
--os-color-error-text:
|
|
30
|
-
--os-color-error-textHover:
|
|
29
|
+
--os-color-error-text: 168 33 33;
|
|
30
|
+
--os-color-error-textHover: 168 33 33;
|
|
31
31
|
--os-color-error-tint: 242 119 119;
|
|
32
32
|
--os-color-warning-main: 239 108 0;
|
|
33
33
|
--os-color-warning-dark: 168 70 0;
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
--os-color-error-dark: 178 35 35;
|
|
106
106
|
--os-color-error-light: 242 119 119;
|
|
107
107
|
--os-color-error-alertBg: 92 26 26;
|
|
108
|
-
--os-color-error-contrast:
|
|
108
|
+
--os-color-error-contrast: 0 0 0;
|
|
109
109
|
--os-color-error-fill: 231 76 76;
|
|
110
110
|
--os-color-error-onFill: 0 0 0;
|
|
111
111
|
--os-color-error-text: 242 119 119;
|
|
@@ -188,7 +188,7 @@
|
|
|
188
188
|
--os-color-error-dark: 178 35 35;
|
|
189
189
|
--os-color-error-light: 242 119 119;
|
|
190
190
|
--os-color-error-alertBg: 92 26 26;
|
|
191
|
-
--os-color-error-contrast:
|
|
191
|
+
--os-color-error-contrast: 0 0 0;
|
|
192
192
|
--os-color-error-fill: 231 76 76;
|
|
193
193
|
--os-color-error-onFill: 0 0 0;
|
|
194
194
|
--os-color-error-text: 242 119 119;
|
package/dist/themes/default.css
CHANGED
|
@@ -20,14 +20,14 @@
|
|
|
20
20
|
--os-color-secondary-light: 209 209 209;
|
|
21
21
|
--os-color-secondary-contrast: 0 0 0;
|
|
22
22
|
--os-color-error-main: 211 47 47;
|
|
23
|
-
--os-color-error-dark:
|
|
23
|
+
--os-color-error-dark: 168 33 33;
|
|
24
24
|
--os-color-error-light: 242 119 119;
|
|
25
25
|
--os-color-error-alertBg: 242 196 196;
|
|
26
26
|
--os-color-error-contrast: 255 255 255;
|
|
27
|
-
--os-color-error-fill:
|
|
27
|
+
--os-color-error-fill: 168 33 33;
|
|
28
28
|
--os-color-error-onFill: 255 255 255;
|
|
29
|
-
--os-color-error-text:
|
|
30
|
-
--os-color-error-textHover:
|
|
29
|
+
--os-color-error-text: 168 33 33;
|
|
30
|
+
--os-color-error-textHover: 168 33 33;
|
|
31
31
|
--os-color-error-tint: 242 119 119;
|
|
32
32
|
--os-color-warning-main: 239 108 0;
|
|
33
33
|
--os-color-warning-dark: 168 70 0;
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
--os-color-error-dark: 178 35 35;
|
|
106
106
|
--os-color-error-light: 242 119 119;
|
|
107
107
|
--os-color-error-alertBg: 92 26 26;
|
|
108
|
-
--os-color-error-contrast:
|
|
108
|
+
--os-color-error-contrast: 0 0 0;
|
|
109
109
|
--os-color-error-fill: 231 76 76;
|
|
110
110
|
--os-color-error-onFill: 0 0 0;
|
|
111
111
|
--os-color-error-text: 242 119 119;
|
|
@@ -18,16 +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:
|
|
21
|
+
--os-color-secondary-contrast: 255 255 255;
|
|
22
22
|
--os-color-error-main: 211 47 47;
|
|
23
|
-
--os-color-error-dark:
|
|
23
|
+
--os-color-error-dark: 168 33 33;
|
|
24
24
|
--os-color-error-light: 242 119 119;
|
|
25
25
|
--os-color-error-alertBg: 242 196 196;
|
|
26
26
|
--os-color-error-contrast: 255 255 255;
|
|
27
|
-
--os-color-error-fill:
|
|
27
|
+
--os-color-error-fill: 168 33 33;
|
|
28
28
|
--os-color-error-onFill: 255 255 255;
|
|
29
|
-
--os-color-error-text:
|
|
30
|
-
--os-color-error-textHover:
|
|
29
|
+
--os-color-error-text: 168 33 33;
|
|
30
|
+
--os-color-error-textHover: 168 33 33;
|
|
31
31
|
--os-color-error-tint: 242 119 119;
|
|
32
32
|
--os-color-warning-main: 239 108 0;
|
|
33
33
|
--os-color-warning-dark: 168 70 0;
|
|
@@ -100,12 +100,12 @@
|
|
|
100
100
|
--os-color-secondary-main: 110 122 90;
|
|
101
101
|
--os-color-secondary-dark: 93 104 73;
|
|
102
102
|
--os-color-secondary-light: 130 141 107;
|
|
103
|
-
--os-color-secondary-contrast:
|
|
103
|
+
--os-color-secondary-contrast: 255 255 255;
|
|
104
104
|
--os-color-error-main: 231 76 76;
|
|
105
105
|
--os-color-error-dark: 178 35 35;
|
|
106
106
|
--os-color-error-light: 242 119 119;
|
|
107
107
|
--os-color-error-alertBg: 92 26 26;
|
|
108
|
-
--os-color-error-contrast:
|
|
108
|
+
--os-color-error-contrast: 0 0 0;
|
|
109
109
|
--os-color-error-fill: 231 76 76;
|
|
110
110
|
--os-color-error-onFill: 0 0 0;
|
|
111
111
|
--os-color-error-text: 242 119 119;
|
|
@@ -183,12 +183,12 @@
|
|
|
183
183
|
--os-color-secondary-main: 110 122 90;
|
|
184
184
|
--os-color-secondary-dark: 93 104 73;
|
|
185
185
|
--os-color-secondary-light: 130 141 107;
|
|
186
|
-
--os-color-secondary-contrast:
|
|
186
|
+
--os-color-secondary-contrast: 255 255 255;
|
|
187
187
|
--os-color-error-main: 231 76 76;
|
|
188
188
|
--os-color-error-dark: 178 35 35;
|
|
189
189
|
--os-color-error-light: 242 119 119;
|
|
190
190
|
--os-color-error-alertBg: 92 26 26;
|
|
191
|
-
--os-color-error-contrast:
|
|
191
|
+
--os-color-error-contrast: 0 0 0;
|
|
192
192
|
--os-color-error-fill: 231 76 76;
|
|
193
193
|
--os-color-error-onFill: 0 0 0;
|
|
194
194
|
--os-color-error-text: 242 119 119;
|
package/dist/themes/forest.css
CHANGED
|
@@ -18,16 +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:
|
|
21
|
+
--os-color-secondary-contrast: 255 255 255;
|
|
22
22
|
--os-color-error-main: 211 47 47;
|
|
23
|
-
--os-color-error-dark:
|
|
23
|
+
--os-color-error-dark: 168 33 33;
|
|
24
24
|
--os-color-error-light: 242 119 119;
|
|
25
25
|
--os-color-error-alertBg: 242 196 196;
|
|
26
26
|
--os-color-error-contrast: 255 255 255;
|
|
27
|
-
--os-color-error-fill:
|
|
27
|
+
--os-color-error-fill: 168 33 33;
|
|
28
28
|
--os-color-error-onFill: 255 255 255;
|
|
29
|
-
--os-color-error-text:
|
|
30
|
-
--os-color-error-textHover:
|
|
29
|
+
--os-color-error-text: 168 33 33;
|
|
30
|
+
--os-color-error-textHover: 168 33 33;
|
|
31
31
|
--os-color-error-tint: 242 119 119;
|
|
32
32
|
--os-color-warning-main: 239 108 0;
|
|
33
33
|
--os-color-warning-dark: 168 70 0;
|
|
@@ -100,12 +100,12 @@
|
|
|
100
100
|
--os-color-secondary-main: 110 122 90;
|
|
101
101
|
--os-color-secondary-dark: 93 104 73;
|
|
102
102
|
--os-color-secondary-light: 130 141 107;
|
|
103
|
-
--os-color-secondary-contrast:
|
|
103
|
+
--os-color-secondary-contrast: 255 255 255;
|
|
104
104
|
--os-color-error-main: 231 76 76;
|
|
105
105
|
--os-color-error-dark: 178 35 35;
|
|
106
106
|
--os-color-error-light: 242 119 119;
|
|
107
107
|
--os-color-error-alertBg: 92 26 26;
|
|
108
|
-
--os-color-error-contrast:
|
|
108
|
+
--os-color-error-contrast: 0 0 0;
|
|
109
109
|
--os-color-error-fill: 231 76 76;
|
|
110
110
|
--os-color-error-onFill: 0 0 0;
|
|
111
111
|
--os-color-error-text: 242 119 119;
|