oneslash-design-system 2.0.0 → 2.0.1

package/dist/components/button.jsx

@@ -26,7 +26,7 @@ export default function Button(_a) {
     var baseTypeClasses = {
         default: {
             primary: 'bg-accent-main text-accent-contrast',
-            secondary: 'bg-secondary-main text-fg-primary',
+            secondary: 'bg-secondary-main text-secondary-contrast',
             tertiary: 'bg-background-accent100 text-fg-primary',
             textOnly: 'text-fg-primary',
         },

package/dist/components/iconButton.jsx

@@ -55,7 +55,7 @@ export default function IconButton(_a) {
             : color === 'primary'
                 ? 'text-accent-contrast' // Primary
                 : color === 'secondary'
-                    ? 'text-fg-primary' // Secondary
+                    ? 'text-secondary-contrast' // Secondary
                     : color === 'tertiary'
                         ? 'text-fg-primary' // Tertiary
                         : 'text-fg-primary'; // iconOnly

package/dist/designTokens.d.ts

@@ -88,6 +88,12 @@ declare const defaultSets: {
             dark: string;
             light: string;
         };
+        secondary: {
+            contrast: string;
+            main: string;
+            dark: string;
+            light: string;
+        };
         background: {
             elevated: string;
             overlay: string;
@@ -234,6 +240,12 @@ declare const defaultSets: {
             dark: string;
             light: string;
         };
+        secondary: {
+            contrast: string;
+            main: string;
+            dark: string;
+            light: string;
+        };
         background: {
             elevated: string;
             overlay: string;
@@ -382,6 +394,12 @@ declare const forestSets: {
             dark: string;
             light: string;
         };
+        secondary: {
+            contrast: string;
+            main: string;
+            dark: string;
+            light: string;
+        };
         background: {
             elevated: string;
             overlay: string;
@@ -528,6 +546,12 @@ declare const forestSets: {
             dark: string;
             light: string;
         };
+        secondary: {
+            contrast: string;
+            main: string;
+            dark: string;
+            light: string;
+        };
         background: {
             elevated: string;
             overlay: string;

package/dist/designTokens.js

@@ -299,7 +299,9 @@ function withSemanticKeys(set, mode) {
     var isLight = mode === 'light';
     /** @param {typeof set.error} g @param {boolean} isError */
     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 })); };
-    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) });
+    return __assign(__assign({}, set), { primary: __assign(__assign({}, set.primary), { contrast: isLight ? '#ffffff' : '#000000' }), 
+        // Secondary buttons use text.primary as their label; a theme whose secondary.main is mid-tone sets its own.
+        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) });
 }
 // Forest: the default set with these values replaced (group by group).
 /**
@@ -336,6 +338,15 @@ var forestDark = override(baseColors.dark, {
  * @returns {S}
  */
 var withForestInfoText = function (set) { return (__assign(__assign({}, set), { info: __assign(__assign({}, set.info), { text: '#0068A3', textHover: '#0068A3' }) })); };
+// Forest's secondary.main (#6E7A5A) is mid-tone: its text.primary gives 3.5:1, so the label is the pale green
+// Scindo's hand-written theme used (3.8:1 light, 3.5:1 dark; report-only in check:contrast).
+/**
+ * @template {typeof base.colors.light} S
+ * @param {S} set
+ * @param {string} contrast
+ * @returns {S}
+ */
+var withSecondaryContrast = function (set, contrast) { return (__assign(__assign({}, set), { secondary: __assign(__assign({}, set.secondary), { contrast: contrast }) })); };
 // Tooltips are inverted surfaces: each mode takes the other mode's accent300 and text.primary of the same theme.
 /**
  * @template {typeof base.colors.light} S
@@ -348,5 +359,5 @@ var withTooltips = function (light, dark) { return ({
     dark: __assign(__assign({}, dark), { misc: __assign(__assign({}, dark.misc), { tooltipBg: light.background.accent300, tooltipText: light.text.primary }) }),
 }); };
 var defaultSets = withTooltips(withSemanticKeys(baseColors.light, 'light'), withSemanticKeys(baseColors.dark, 'dark'));
-var forestSets = withTooltips(withForestInfoText(withSemanticKeys(forestLight, 'light')), withSemanticKeys(forestDark, 'dark'));
+var forestSets = withTooltips(withSecondaryContrast(withForestInfoText(withSemanticKeys(forestLight, 'light')), '#E7ECDA'), withSecondaryContrast(withSemanticKeys(forestDark, 'dark'), '#D9E5C7'));
 module.exports = __assign(__assign({}, base), { colors: defaultSets, themes: { forest: forestSets } });

package/dist/tailwind-preset-auto.js

@@ -56,6 +56,9 @@ module.exports = {
         "secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
         "light-secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
         "dark-secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
+        "secondary-contrast": "rgb(var(--os-color-secondary-contrast) / <alpha-value>)",
+        "light-secondary-contrast": "rgb(var(--os-color-secondary-contrast) / <alpha-value>)",
+        "dark-secondary-contrast": "rgb(var(--os-color-secondary-contrast) / <alpha-value>)",
         "error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
         "light-error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
         "dark-error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",

package/dist/tailwind-preset.js

@@ -50,6 +50,9 @@ module.exports = {
         "secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
         "light-secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
         "dark-secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
+        "secondary-contrast": "rgb(var(--os-color-secondary-contrast) / <alpha-value>)",
+        "light-secondary-contrast": "rgb(var(--os-color-secondary-contrast) / <alpha-value>)",
+        "dark-secondary-contrast": "rgb(var(--os-color-secondary-contrast) / <alpha-value>)",
         "error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
         "light-error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
         "dark-error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",

package/dist/theme-auto.css

@@ -53,6 +53,9 @@
   --color-secondary-light: rgb(var(--os-color-secondary-light));
   --color-light-secondary-light: rgb(var(--os-color-secondary-light));
   --color-dark-secondary-light: rgb(var(--os-color-secondary-light));
+  --color-secondary-contrast: rgb(var(--os-color-secondary-contrast));
+  --color-light-secondary-contrast: rgb(var(--os-color-secondary-contrast));
+  --color-dark-secondary-contrast: rgb(var(--os-color-secondary-contrast));
   --color-error-main: rgb(var(--os-color-error-main));
   --color-light-error-main: rgb(var(--os-color-error-main));
   --color-dark-error-main: rgb(var(--os-color-error-main));

package/dist/theme.css

@@ -48,6 +48,9 @@
   --color-secondary-light: rgb(var(--os-color-secondary-light));
   --color-light-secondary-light: rgb(var(--os-color-secondary-light));
   --color-dark-secondary-light: rgb(var(--os-color-secondary-light));
+  --color-secondary-contrast: rgb(var(--os-color-secondary-contrast));
+  --color-light-secondary-contrast: rgb(var(--os-color-secondary-contrast));
+  --color-dark-secondary-contrast: rgb(var(--os-color-secondary-contrast));
   --color-error-main: rgb(var(--os-color-error-main));
   --color-light-error-main: rgb(var(--os-color-error-main));
   --color-dark-error-main: rgb(var(--os-color-error-main));

package/dist/themes/default-auto.css

@@ -18,6 +18,7 @@
   --os-color-secondary-main: 176 176 176;
   --os-color-secondary-dark: 136 136 136;
   --os-color-secondary-light: 209 209 209;
+  --os-color-secondary-contrast: 0 0 0;
   --os-color-error-main: 211 47 47;
   --os-color-error-dark: 178 35 35;
   --os-color-error-light: 242 119 119;
@@ -99,6 +100,7 @@
   --os-color-secondary-main: 79 79 79;
   --os-color-secondary-dark: 69 69 69;
   --os-color-secondary-light: 109 109 109;
+  --os-color-secondary-contrast: 238 238 238;
   --os-color-error-main: 231 76 76;
   --os-color-error-dark: 178 35 35;
   --os-color-error-light: 242 119 119;
@@ -181,6 +183,7 @@
     --os-color-secondary-main: 79 79 79;
     --os-color-secondary-dark: 69 69 69;
     --os-color-secondary-light: 109 109 109;
+    --os-color-secondary-contrast: 238 238 238;
     --os-color-error-main: 231 76 76;
     --os-color-error-dark: 178 35 35;
     --os-color-error-light: 242 119 119;

package/dist/themes/default.css

@@ -18,6 +18,7 @@
   --os-color-secondary-main: 176 176 176;
   --os-color-secondary-dark: 136 136 136;
   --os-color-secondary-light: 209 209 209;
+  --os-color-secondary-contrast: 0 0 0;
   --os-color-error-main: 211 47 47;
   --os-color-error-dark: 178 35 35;
   --os-color-error-light: 242 119 119;
@@ -99,6 +100,7 @@
   --os-color-secondary-main: 79 79 79;
   --os-color-secondary-dark: 69 69 69;
   --os-color-secondary-light: 109 109 109;
+  --os-color-secondary-contrast: 238 238 238;
   --os-color-error-main: 231 76 76;
   --os-color-error-dark: 178 35 35;
   --os-color-error-light: 242 119 119;

package/dist/themes/forest-auto.css

@@ -18,6 +18,7 @@
   --os-color-secondary-main: 110 122 90;
   --os-color-secondary-dark: 93 104 73;
   --os-color-secondary-light: 130 141 107;
+  --os-color-secondary-contrast: 231 236 218;
   --os-color-error-main: 211 47 47;
   --os-color-error-dark: 178 35 35;
   --os-color-error-light: 242 119 119;
@@ -99,6 +100,7 @@
   --os-color-secondary-main: 110 122 90;
   --os-color-secondary-dark: 93 104 73;
   --os-color-secondary-light: 130 141 107;
+  --os-color-secondary-contrast: 217 229 199;
   --os-color-error-main: 231 76 76;
   --os-color-error-dark: 178 35 35;
   --os-color-error-light: 242 119 119;
@@ -181,6 +183,7 @@
     --os-color-secondary-main: 110 122 90;
     --os-color-secondary-dark: 93 104 73;
     --os-color-secondary-light: 130 141 107;
+    --os-color-secondary-contrast: 217 229 199;
     --os-color-error-main: 231 76 76;
     --os-color-error-dark: 178 35 35;
     --os-color-error-light: 242 119 119;

package/dist/themes/forest.css

@@ -18,6 +18,7 @@
   --os-color-secondary-main: 110 122 90;
   --os-color-secondary-dark: 93 104 73;
   --os-color-secondary-light: 130 141 107;
+  --os-color-secondary-contrast: 231 236 218;
   --os-color-error-main: 211 47 47;
   --os-color-error-dark: 178 35 35;
   --os-color-error-light: 242 119 119;
@@ -99,6 +100,7 @@
   --os-color-secondary-main: 110 122 90;
   --os-color-secondary-dark: 93 104 73;
   --os-color-secondary-light: 130 141 107;
+  --os-color-secondary-contrast: 217 229 199;
   --os-color-error-main: 231 76 76;
   --os-color-error-dark: 178 35 35;
   --os-color-error-light: 242 119 119;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",