diff --git a/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx b/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx index 4aea24ba..937bb730 100644 --- a/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx +++ b/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx @@ -58,7 +58,7 @@ export function Content({ data }: { data: IProps }) { <> -
+
{departmentData.deptTitle} diff --git a/examples/district/config/tokens/tokens.json b/examples/district/config/tokens/tokens.json index 6c9fd67c..892f8d90 100644 --- a/examples/district/config/tokens/tokens.json +++ b/examples/district/config/tokens/tokens.json @@ -727,21 +727,21 @@ } }, { - "name": "Border/Highlight/OnBG/Subdued", + "name": "Border/Highlight/OnBG/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/violet/solid/9" + "name": "base/violet/solid/7" } }, { - "name": "Border/Highlight/OnBG/Default", + "name": "Border/Highlight/OnBG/Subdued", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/violet/solid/7" + "name": "base/violet/solid/9" } }, { @@ -835,39 +835,39 @@ } }, { - "name": "Action/Primary/Basic/Pressed", + "name": "Icon/Highlight", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/violet/solid/11" + "name": "base/violet/solid/10" } }, { - "name": "Icon/Highlight", + "name": "Action/Primary/Basic/Pressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/violet/solid/10" + "name": "base/violet/solid/11" } }, { - "name": "Icon/Interactive", + "name": "Action/Primary/Basic/Depressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/indigo/solid/11" + "name": "base/violet/solid/12" } }, { - "name": "Action/Primary/Basic/Depressed", + "name": "Icon/Interactive", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/violet/solid/12" + "name": "base/indigo/solid/10" } }, { @@ -961,21 +961,21 @@ } }, { - "name": "Action/Primary/Interactive/Default", + "name": "Action/Secondary/Critical/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/blue/solid/9" + "name": "base/red/solid/3" } }, { - "name": "Action/Secondary/Critical/Default", + "name": "Action/Primary/Interactive/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/red/solid/3" + "name": "base/blue/solid/9" } }, { @@ -1015,57 +1015,57 @@ } }, { - "name": "Action/Secondary/Basic/Default", + "name": "Action/Primary/Success/Hovered", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/violet/solid/3" + "name": "base/green/solid/10" } }, { - "name": "Action/Primary/Success/Hovered", + "name": "Action/Secondary/Basic/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/green/solid/10" + "name": "base/violet/solid/3" } }, { - "name": "Action/Primary/Success/Pressed", + "name": "Action/Secondary/Disabled", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/green/solid/11" + "name": "base/gray/slate/solid/3" } }, { - "name": "Action/Secondary/Disabled", + "name": "Action/Primary/Critical/Depressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/gray/slate/solid/3" + "name": "base/red/solid/12" } }, { - "name": "Action/Primary/Critical/Depressed", + "name": "Action/Primary/Success/Pressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/red/solid/12" + "name": "base/green/solid/11" } }, { - "name": "Action/Secondary/Interactive/Pressed", + "name": "Action/Secondary/Success/Hovered", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/blue/solid/5" + "name": "base/green/solid/4" } }, { @@ -1078,57 +1078,57 @@ } }, { - "name": "Action/Primary/Success/Depressed", + "name": "Action/Secondary/Interactive/Pressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/green/solid/12" + "name": "base/blue/solid/5" } }, { - "name": "Action/Secondary/Interactive/Hovered", + "name": "Action/Secondary/Success/Depressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/blue/solid/4" + "name": "base/green/solid/6" } }, { - "name": "Action/Secondary/Success/Depressed", + "name": "Action/Secondary/Interactive/Hovered", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/green/solid/6" + "name": "base/blue/solid/4" } }, { - "name": "Action/Secondary/Neutral/Default", + "name": "Action/Secondary/Interactive/Depressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/gray/slate/solid/1" + "name": "base/blue/solid/6" } }, { - "name": "Action/Secondary/Success/Hovered", + "name": "Action/Primary/Success/Depressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/green/solid/4" + "name": "base/green/solid/12" } }, { - "name": "Action/Secondary/Interactive/Depressed", + "name": "Action/Secondary/Neutral/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/blue/solid/6" + "name": "base/gray/slate/solid/1" } }, { @@ -1141,30 +1141,30 @@ } }, { - "name": "Action/Secondary/Neutral/Hovered", + "name": "Action/Secondary/Interactive/Default", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/gray/slate/solid/2" + "name": "base/blue/solid/3" } }, { - "name": "Action/Secondary/Interactive/Default", + "name": "Action/Secondary/Neutral/Hovered", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/blue/solid/3" + "name": "base/gray/slate/solid/2" } }, { - "name": "Action/Secondary/Basic/Hovered", + "name": "Action/Secondary/Neutral/Pressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/violet/solid/4" + "name": "base/gray/slate/solid/5" } }, { @@ -1177,21 +1177,21 @@ } }, { - "name": "Action/Secondary/Neutral/Pressed", + "name": "Action/Secondary/Basic/Depressed", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/gray/slate/solid/5" + "name": "base/violet/solid/6" } }, { - "name": "Action/Secondary/Basic/Depressed", + "name": "Action/Secondary/Basic/Hovered", "type": "color", "isAlias": true, "value": { "collection": "Colors", - "name": "base/violet/solid/6" + "name": "base/violet/solid/4" } }, { @@ -1227,6 +1227,12 @@ "name": "base/blue/alpha/2" } }, + { + "name": "base/indigo/alpha/2", + "type": "color", + "isAlias": false, + "value": "#054CFF08" + }, { "name": "Action/Tertiary/Success/Hover", "type": "color", @@ -1236,12 +1242,6 @@ "name": "base/green/alpha/2" } }, - { - "name": "base/indigo/alpha/2", - "type": "color", - "isAlias": false, - "value": "#054CFF08" - }, { "name": "Action/Tertiary/Critical/Hover", "type": "color", @@ -1392,12 +1392,6 @@ "name": "base/amber/solid/2" } }, - { - "name": "base/blue/alpha/1", - "type": "color", - "isAlias": false, - "value": "#0582FF05" - }, { "name": "Surface/Critical", "type": "color", @@ -1407,6 +1401,12 @@ "name": "base/red/solid/2" } }, + { + "name": "base/blue/alpha/1", + "type": "color", + "isAlias": false, + "value": "#0582FF05" + }, { "name": "base/blue/alpha/2", "type": "color", @@ -1422,12 +1422,6 @@ "name": "base/green/solid/2" } }, - { - "name": "base/blue/alpha/3", - "type": "color", - "isAlias": false, - "value": "#0280FF12" - }, { "name": "Surface/Highlight/Subdued", "type": "color", @@ -1438,10 +1432,10 @@ } }, { - "name": "base/blue/alpha/4", + "name": "base/blue/alpha/3", "type": "color", "isAlias": false, - "value": "#0180FF1F" + "value": "#0280FF12" }, { "name": "Surface/Interactive", @@ -1452,6 +1446,12 @@ "name": "base/blue/solid/2" } }, + { + "name": "base/blue/alpha/4", + "type": "color", + "isAlias": false, + "value": "#0180FF1F" + }, { "name": "base/blue/alpha/5", "type": "color", @@ -1467,12 +1467,6 @@ "name": "base/violet/solid/4" } }, - { - "name": "base/blue/alpha/6", - "type": "color", - "isAlias": false, - "value": "#0177E647" - }, { "name": "Surface/Highlight/Hovered", "type": "color", @@ -1482,6 +1476,12 @@ "name": "base/violet/solid/6" } }, + { + "name": "base/blue/alpha/6", + "type": "color", + "isAlias": false, + "value": "#0177E647" + }, { "name": "base/blue/alpha/7", "type": "color", @@ -1554,6 +1554,15 @@ "isAlias": false, "value": "#2A01DF30" }, + { + "name": "Surface/backdrop", + "type": "color", + "isAlias": true, + "value": { + "collection": "Colors", + "name": "base/gray/slate/alpha/9" + } + }, { "name": "base/violet/alpha/7", "type": "color", @@ -3351,10 +3360,32 @@ } ] } + }, + { + "name": "Basic 4 Col", + "type": "grid", + "isAlias": false, + "value": { + "layoutGrids": [ + { + "pattern": "COLUMNS", + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.1 + }, + "alignment": "STRETCH", + "gutterSize": 16, + "offset": 20, + "count": 4 + } + ] + } } ] } ] } ] -} +} \ No newline at end of file diff --git a/examples/district/styles/tokens/_variables.css b/examples/district/styles/tokens/_variables.css index cb627231..00246d28 100644 --- a/examples/district/styles/tokens/_variables.css +++ b/examples/district/styles/tokens/_variables.css @@ -108,8 +108,8 @@ --border-warning-subdued: var(--base-amber-solid-7); --border-highlight-default: var(--base-violet-solid-8); --border-highlight-subdued: var(--base-violet-solid-7); - --border-highlight-onbg-subdued: var(--base-violet-solid-9); --border-highlight-onbg-default: var(--base-violet-solid-7); + --border-highlight-onbg-subdued: var(--base-violet-solid-9); --border-interactive-default: var(--base-blue-solid-8); --border-interactive-focused: var(--base-blue-solid-7); --icon-default: var(--base-gray-slate-solid-11); @@ -120,10 +120,10 @@ --icon-warning: var(--base-amber-solid-10); --action-primary-basic-hovered: var(--base-violet-solid-10); --icon-success: var(--base-green-solid-10); - --action-primary-basic-pressed: var(--base-violet-solid-11); --icon-highlight: var(--base-violet-solid-10); - --icon-interactive: var(--base-indigo-solid-11); + --action-primary-basic-pressed: var(--base-violet-solid-11); --action-primary-basic-depressed: var(--base-violet-solid-12); + --icon-interactive: var(--base-indigo-solid-10); --icon-onbg-default: var(--base-gray-slate-solid-1); --action-primary-disabled: var(--base-gray-slate-solid-9); --icon-onbg-subdued: var(--base-gray-slate-solid-4); @@ -134,38 +134,38 @@ --action-secondary-critical-pressed: var(--base-red-solid-5); --action-secondary-critical-hovered: var(--base-red-solid-4); --action-secondary-critical-depressed: var(--base-red-solid-6); - --action-primary-interactive-default: var(--base-blue-solid-9); --action-secondary-critical-default: var(--base-red-solid-3); + --action-primary-interactive-default: var(--base-blue-solid-9); --action-primary-interactive-hovered: var(--base-blue-solid-10); --action-primary-interactive-pressed: var(--base-blue-solid-11); --action-primary-interactive-depressed: var(--base-blue-solid-12); --action-primary-critical-pressed: var(--base-red-solid-11); - --action-secondary-basic-default: var(--base-violet-solid-3); --action-primary-success-hovered: var(--base-green-solid-10); - --action-primary-success-pressed: var(--base-green-solid-11); + --action-secondary-basic-default: var(--base-violet-solid-3); --action-secondary-disabled: var(--base-gray-slate-solid-3); --action-primary-critical-depressed: var(--base-red-solid-12); - --action-secondary-interactive-pressed: var(--base-blue-solid-5); + --action-primary-success-pressed: var(--base-green-solid-11); + --action-secondary-success-hovered: var(--base-green-solid-4); --action-secondary-success-pressed: var(--base-green-solid-5); - --action-primary-success-depressed: var(--base-green-solid-12); - --action-secondary-interactive-hovered: var(--base-blue-solid-4); + --action-secondary-interactive-pressed: var(--base-blue-solid-5); --action-secondary-success-depressed: var(--base-green-solid-6); - --action-secondary-neutral-default: var(--base-gray-slate-solid-1); - --action-secondary-success-hovered: var(--base-green-solid-4); + --action-secondary-interactive-hovered: var(--base-blue-solid-4); --action-secondary-interactive-depressed: var(--base-blue-solid-6); + --action-primary-success-depressed: var(--base-green-solid-12); + --action-secondary-neutral-default: var(--base-gray-slate-solid-1); --action-secondary-success-default: var(--base-green-solid-3); - --action-secondary-neutral-hovered: var(--base-gray-slate-solid-2); --action-secondary-interactive-default: var(--base-blue-solid-3); - --action-secondary-basic-hovered: var(--base-violet-solid-4); - --action-secondary-basic-pressed: var(--base-violet-solid-5); + --action-secondary-neutral-hovered: var(--base-gray-slate-solid-2); --action-secondary-neutral-pressed: var(--base-gray-slate-solid-5); + --action-secondary-basic-pressed: var(--base-violet-solid-5); --action-secondary-basic-depressed: var(--base-violet-solid-6); + --action-secondary-basic-hovered: var(--base-violet-solid-4); --action-secondary-neutral-depressed: var(--base-gray-slate-solid-6); --action-tertiary-basic-hover: var(--base-violet-alpha-2); --base-indigo-alpha-1: #05058203; --action-tertiary-interactive-hover: var(--base-blue-alpha-2); - --action-tertiary-success-hover: var(--base-green-alpha-2); --base-indigo-alpha-2: #054CFF08; + --action-tertiary-success-hover: var(--base-green-alpha-2); --action-tertiary-critical-hover: var(--base-red-alpha-2); --base-indigo-alpha-3: #0144FF0F; --base-indigo-alpha-4: #0247F51A; @@ -186,18 +186,18 @@ --base-indigo-alpha-11: #00259ECC; --base-indigo-alpha-12: #000E3AF0; --surface-warning: var(--base-amber-solid-2); - --base-blue-alpha-1: #0582FF05; --surface-critical: var(--base-red-solid-2); + --base-blue-alpha-1: #0582FF05; --base-blue-alpha-2: #0582FF0A; --surface-success: var(--base-green-solid-2); - --base-blue-alpha-3: #0280FF12; --surface-highlight-subdued: var(--base-violet-solid-2); - --base-blue-alpha-4: #0180FF1F; + --base-blue-alpha-3: #0280FF12; --surface-interactive: var(--base-blue-solid-2); + --base-blue-alpha-4: #0180FF1F; --base-blue-alpha-5: #0180EF30; --surface-highlight-default: var(--base-violet-solid-4); - --base-blue-alpha-6: #0177E647; --surface-highlight-hovered: var(--base-violet-solid-6); + --base-blue-alpha-6: #0177E647; --base-blue-alpha-7: #0077DF69; --base-blue-alpha-8: #0082E6A1; --base-blue-alpha-9: #0091FFFA; @@ -210,6 +210,7 @@ --base-violet-alpha-4: #2E02F417; --base-violet-alpha-5: #2F01E821; --base-violet-alpha-6: #2A01DF30; + --surface-backdrop: var(--base-gray-slate-alpha-9); --base-violet-alpha-7: #2B01D447; --base-violet-alpha-8: #2A00D066; --base-violet-alpha-9: #2500B6A8; diff --git a/examples/district/styles/tokens/tailwind/color.js b/examples/district/styles/tokens/tailwind/color.js index ded0b84d..6f6c4a7c 100644 --- a/examples/district/styles/tokens/tailwind/color.js +++ b/examples/district/styles/tokens/tailwind/color.js @@ -108,8 +108,8 @@ module.exports = { "borderWarningSubdued": "var(--base-amber-solid-7)", "borderHighlightDefault": "var(--base-violet-solid-8)", "borderHighlightSubdued": "var(--base-violet-solid-7)", - "borderHighlightOnBGSubdued": "var(--base-violet-solid-9)", "borderHighlightOnBGDefault": "var(--base-violet-solid-7)", + "borderHighlightOnBGSubdued": "var(--base-violet-solid-9)", "borderInteractiveDefault": "var(--base-blue-solid-8)", "borderInteractiveFocused": "var(--base-blue-solid-7)", "iconDefault": "var(--base-gray-slate-solid-11)", @@ -120,10 +120,10 @@ module.exports = { "iconWarning": "var(--base-amber-solid-10)", "actionPrimaryBasicHovered": "var(--base-violet-solid-10)", "iconSuccess": "var(--base-green-solid-10)", - "actionPrimaryBasicPressed": "var(--base-violet-solid-11)", "iconHighlight": "var(--base-violet-solid-10)", - "iconInteractive": "var(--base-indigo-solid-11)", + "actionPrimaryBasicPressed": "var(--base-violet-solid-11)", "actionPrimaryBasicDepressed": "var(--base-violet-solid-12)", + "iconInteractive": "var(--base-indigo-solid-10)", "iconOnBGDefault": "var(--base-gray-slate-solid-1)", "actionPrimaryDisabled": "var(--base-gray-slate-solid-9)", "iconOnBGSubdued": "var(--base-gray-slate-solid-4)", @@ -134,38 +134,38 @@ module.exports = { "actionSecondaryCriticalPressed": "var(--base-red-solid-5)", "actionSecondaryCriticalHovered": "var(--base-red-solid-4)", "actionSecondaryCriticalDepressed": "var(--base-red-solid-6)", - "actionPrimaryInteractiveDefault": "var(--base-blue-solid-9)", "actionSecondaryCriticalDefault": "var(--base-red-solid-3)", + "actionPrimaryInteractiveDefault": "var(--base-blue-solid-9)", "actionPrimaryInteractiveHovered": "var(--base-blue-solid-10)", "actionPrimaryInteractivePressed": "var(--base-blue-solid-11)", "actionPrimaryInteractiveDepressed": "var(--base-blue-solid-12)", "actionPrimaryCriticalPressed": "var(--base-red-solid-11)", - "actionSecondaryBasicDefault": "var(--base-violet-solid-3)", "actionPrimarySuccessHovered": "var(--base-green-solid-10)", - "actionPrimarySuccessPressed": "var(--base-green-solid-11)", + "actionSecondaryBasicDefault": "var(--base-violet-solid-3)", "actionSecondaryDisabled": "var(--base-gray-slate-solid-3)", "actionPrimaryCriticalDepressed": "var(--base-red-solid-12)", - "actionSecondaryInteractivePressed": "var(--base-blue-solid-5)", + "actionPrimarySuccessPressed": "var(--base-green-solid-11)", + "actionSecondarySuccessHovered": "var(--base-green-solid-4)", "actionSecondarySuccessPressed": "var(--base-green-solid-5)", - "actionPrimarySuccessDepressed": "var(--base-green-solid-12)", - "actionSecondaryInteractiveHovered": "var(--base-blue-solid-4)", + "actionSecondaryInteractivePressed": "var(--base-blue-solid-5)", "actionSecondarySuccessDepressed": "var(--base-green-solid-6)", - "actionSecondaryNeutralDefault": "var(--base-gray-slate-solid-1)", - "actionSecondarySuccessHovered": "var(--base-green-solid-4)", + "actionSecondaryInteractiveHovered": "var(--base-blue-solid-4)", "actionSecondaryInteractiveDepressed": "var(--base-blue-solid-6)", + "actionPrimarySuccessDepressed": "var(--base-green-solid-12)", + "actionSecondaryNeutralDefault": "var(--base-gray-slate-solid-1)", "actionSecondarySuccessDefault": "var(--base-green-solid-3)", - "actionSecondaryNeutralHovered": "var(--base-gray-slate-solid-2)", "actionSecondaryInteractiveDefault": "var(--base-blue-solid-3)", - "actionSecondaryBasicHovered": "var(--base-violet-solid-4)", - "actionSecondaryBasicPressed": "var(--base-violet-solid-5)", + "actionSecondaryNeutralHovered": "var(--base-gray-slate-solid-2)", "actionSecondaryNeutralPressed": "var(--base-gray-slate-solid-5)", + "actionSecondaryBasicPressed": "var(--base-violet-solid-5)", "actionSecondaryBasicDepressed": "var(--base-violet-solid-6)", + "actionSecondaryBasicHovered": "var(--base-violet-solid-4)", "actionSecondaryNeutralDepressed": "var(--base-gray-slate-solid-6)", "actionTertiaryBasicHover": "var(--base-violet-alpha-2)", "baseIndigoAlpha1": "#05058203", "actionTertiaryInteractiveHover": "var(--base-blue-alpha-2)", - "actionTertiarySuccessHover": "var(--base-green-alpha-2)", "baseIndigoAlpha2": "#054CFF08", + "actionTertiarySuccessHover": "var(--base-green-alpha-2)", "actionTertiaryCriticalHover": "var(--base-red-alpha-2)", "baseIndigoAlpha3": "#0144FF0F", "baseIndigoAlpha4": "#0247F51A", @@ -186,18 +186,18 @@ module.exports = { "baseIndigoAlpha11": "#00259ECC", "baseIndigoAlpha12": "#000E3AF0", "surfaceWarning": "var(--base-amber-solid-2)", - "baseBlueAlpha1": "#0582FF05", "surfaceCritical": "var(--base-red-solid-2)", + "baseBlueAlpha1": "#0582FF05", "baseBlueAlpha2": "#0582FF0A", "surfaceSuccess": "var(--base-green-solid-2)", - "baseBlueAlpha3": "#0280FF12", "surfaceHighlightSubdued": "var(--base-violet-solid-2)", - "baseBlueAlpha4": "#0180FF1F", + "baseBlueAlpha3": "#0280FF12", "surfaceInteractive": "var(--base-blue-solid-2)", + "baseBlueAlpha4": "#0180FF1F", "baseBlueAlpha5": "#0180EF30", "surfaceHighlightDefault": "var(--base-violet-solid-4)", - "baseBlueAlpha6": "#0177E647", "surfaceHighlightHovered": "var(--base-violet-solid-6)", + "baseBlueAlpha6": "#0177E647", "baseBlueAlpha7": "#0077DF69", "baseBlueAlpha8": "#0082E6A1", "baseBlueAlpha9": "#0091FFFA", @@ -210,6 +210,7 @@ module.exports = { "baseVioletAlpha4": "#2E02F417", "baseVioletAlpha5": "#2F01E821", "baseVioletAlpha6": "#2A01DF30", + "surfaceBackdrop": "var(--base-gray-slate-alpha-9)", "baseVioletAlpha7": "#2B01D447", "baseVioletAlpha8": "#2A00D066", "baseVioletAlpha9": "#2500B6A8", diff --git a/packages/opub-ui/assets/styles.css b/packages/opub-ui/assets/styles.css index 98a4c905..2edccd65 100644 --- a/packages/opub-ui/assets/styles.css +++ b/packages/opub-ui/assets/styles.css @@ -1,4 +1,9 @@ @import './reset.css'; @import './base.css'; -@import './tokens.css'; +/* @import './tokens.css'; */ @import './styles-bundled.css'; + +:root { + --primary-font: 'Inter', sans-serif; + --mono-font: 'Space Mono', monospace; +} diff --git a/packages/opub-ui/src/components/ActionList/ActionList.module.scss b/packages/opub-ui/src/components/ActionList/ActionList.module.scss index 1d47a215..8f72dfca 100644 --- a/packages/opub-ui/src/components/ActionList/ActionList.module.scss +++ b/packages/opub-ui/src/components/ActionList/ActionList.module.scss @@ -1,5 +1,12 @@ @import '../../../styles/common'; +.ActionList { + box-shadow: var(--shadow-element-popover); + width: fit-content; + border-radius: var(--border-radius-2); + background-color: var(--surface-default); +} + .Item { --op-action-list-image-size: 20px; --op-action-list-item-min-height: var(--space-10); @@ -25,22 +32,23 @@ } &:hover { - background-color: var(--surface-hovered); + background-color: var(--action-secondary-neutral-hovered); text-decoration: none; - outline: var(--border-width-3) solid transparent; + outline: var(--border-width-2) solid transparent; } &:active { - background-color: var(--surface-pressed); + background-color: var(--action-secondary-interactive-default); svg { - color: var(--interactive); + color: var(--icon-interactive); + fill: var(--icon-interactive); } } &:focus-visible:not(:active) { @include focus-ring($style: 'focused'); - outline: var(--border-width-3) solid transparent; + outline: var(--border-width-2) solid transparent; } &:visited { @@ -52,7 +60,8 @@ background-color: var(--surface-selected); svg { - color: var(--interactive); + color: var(--icon-interactive); + fill: var(--icon-interactive); } &::before { @@ -65,15 +74,16 @@ svg { color: var(--icon-critical); + fill: var(--icon-critical); } &:hover { - background-color: var(--surface-critical-subdued-hovered); + background-color: var(--action-secondary-critical-default); } &:active, &.active { - background-color: var(--surface-critical-subdued-pressed); + background-color: var(--action-secondary-critical-pressed); } } @@ -84,6 +94,7 @@ .Prefix svg, .Suffix svg { color: var(--icon-disabled); + fill: var(--icon-disabled); } } } @@ -105,12 +116,12 @@ background-position: center center; svg { - color: var(--icon); + color: var(--icon-default); } } .Suffix svg { - color: var(--icon); + color: var(--icon-default); } .Text { diff --git a/packages/opub-ui/src/components/ActionList/ActionList.stories.tsx b/packages/opub-ui/src/components/ActionList/ActionList.stories.tsx index 426a1a4d..1473ebe0 100644 --- a/packages/opub-ui/src/components/ActionList/ActionList.stories.tsx +++ b/packages/opub-ui/src/components/ActionList/ActionList.stories.tsx @@ -1,7 +1,7 @@ -import { Meta, StoryObj } from '@storybook/react'; -import { Button } from '../Button'; -import { Popover } from '../Popover'; +import { Icon } from '../Icon'; import { ActionList } from './ActionList'; +import { ExportMinor, ImportMinor, TickMinor } from '@shopify/polaris-icons'; +import { Meta, StoryObj } from '@storybook/react'; /** * Action lists render a list of actions or selectable options. This component is usually placed inside a popover container to create a dropdown menu @@ -9,6 +9,7 @@ import { ActionList } from './ActionList'; * Reference: https://polaris.shopify.com/components/lists/action-list */ const meta = { + title: 'Verified/ActionList', component: ActionList, } satisfies Meta; @@ -18,14 +19,9 @@ type Story = StoryObj; export const Default: Story = { render: ({ ...args }) => { return ( - - - - - - - - +
+ +
); }, args: { @@ -33,3 +29,34 @@ export const Default: Story = { items: [{ content: 'Create Organisation' }, { content: 'Create Dataset' }], }, }; + +export const WithSuffix: Story = { + ...Default, + args: { + items: [ + { + active: true, + content: 'Import file', + icon: , + suffix: , + }, + { content: 'Export file', icon: }, + ], + }, +}; + +export const WithSections: Story = { + ...Default, + args: { + sections: [ + { + title: 'File options', + items: [{ content: 'Import file' }, { content: 'Export file' }], + }, + { + title: 'Bulk actions', + items: [{ content: 'Edit' }, { content: 'Delete' }], + }, + ], + }, +}; diff --git a/packages/opub-ui/src/components/ActionList/ActionList.tsx b/packages/opub-ui/src/components/ActionList/ActionList.tsx index d59e6730..045acb5a 100644 --- a/packages/opub-ui/src/components/ActionList/ActionList.tsx +++ b/packages/opub-ui/src/components/ActionList/ActionList.tsx @@ -9,8 +9,8 @@ import { wrapFocusNextFocusableMenuItem, wrapFocusPreviousFocusableMenuItem, } from '../../utils/focus'; -import { Box } from '../Box'; import { KeypressListener } from '../KeypressListener'; +import styles from './ActionList.module.scss'; import { Item, ItemProps } from './components/Item'; import { Section } from './components/Section'; import { useRef } from 'react'; @@ -107,16 +107,18 @@ export function ActionList({ ) : null; + const Element = hasMultipleSections ? 'ul' : 'div'; + return ( - {listeners} {sectionMarkup} - + ); } diff --git a/packages/opub-ui/src/components/ActionList/components/Section/Section.tsx b/packages/opub-ui/src/components/ActionList/components/Section/Section.tsx index 2ebce569..84909aae 100644 --- a/packages/opub-ui/src/components/ActionList/components/Section/Section.tsx +++ b/packages/opub-ui/src/components/ActionList/components/Section/Section.tsx @@ -2,7 +2,7 @@ import type { ActionListItemDescriptor, ActionListSection, } from '../../../../types/actionlist'; -import { Box } from '../../../Box'; +// import { Box } from '../../../Box'; import { MenuContext } from '../../../Menu/Menu'; import { Text } from '../../../Text'; import { Item } from '../Item'; @@ -63,16 +63,11 @@ export function Section({ ); const titleMarkup = section.title ? ( - - +
+ {section.title} - +
) : null; let sectionRole: 'menu' | 'presentation' | undefined; @@ -91,27 +86,33 @@ export function Section({ const sectionMarkup = ( <> {titleMarkup} - {actionMarkup} - + ); return hasMultipleSections ? ( - {sectionMarkup} - + ) : ( sectionMarkup ); diff --git a/packages/opub-ui/src/components/AlertDialog/AlertDialog.stories.tsx b/packages/opub-ui/src/components/AlertDialog/AlertDialog.stories.tsx index 1e7d7b3e..c414245a 100644 --- a/packages/opub-ui/src/components/AlertDialog/AlertDialog.stories.tsx +++ b/packages/opub-ui/src/components/AlertDialog/AlertDialog.stories.tsx @@ -1,12 +1,14 @@ -import { Meta, StoryObj } from '@storybook/react'; import { Button } from '../Button'; import { AlertDialog } from './AlertDialog'; +import { Meta, StoryObj } from '@storybook/react'; + /** * A modal dialog that interrupts the user with important content and expects a response. * * Reference: https://www.radix-ui.com/docs/primitives/components/alert-dialog */ const meta = { + title: 'Verified/AlertDialog', component: AlertDialog.Content, } satisfies Meta; diff --git a/packages/opub-ui/src/components/AlertDialog/AlertDialog.tsx b/packages/opub-ui/src/components/AlertDialog/AlertDialog.tsx index 82cd4094..734ccac6 100644 --- a/packages/opub-ui/src/components/AlertDialog/AlertDialog.tsx +++ b/packages/opub-ui/src/components/AlertDialog/AlertDialog.tsx @@ -9,7 +9,6 @@ interface DialogProps extends AlertDialogRadix.DialogProps { Trigger?: AlertDialogRadix.DialogTriggerProps; Content?: ContentProps; } -// console.log(); const AlertDialog = ({ children, ...props }: DialogProps) => { return {children}; diff --git a/packages/opub-ui/src/components/Avatar/Avatar.module.scss b/packages/opub-ui/src/components/Avatar/Avatar.module.scss index 5d7d3b81..e3919ca0 100644 --- a/packages/opub-ui/src/components/Avatar/Avatar.module.scss +++ b/packages/opub-ui/src/components/Avatar/Avatar.module.scss @@ -1,13 +1,20 @@ @import '../../../styles/common'; +.Wrapper { + display: flex; + gap: var(--space-2); + justify-content: center; + align-items: center; +} + .Avatar { display: flex; - height: 40px; - width: 40px; - border-radius: var(--border-radius-half); - background-color: var(--surface-decorative-three); align-items: center; justify-content: center; + height: 40px; + width: 40px; + border-radius: var(--border-radius-full); + background-color: var(--border-highlight-subdued); span { display: flex; @@ -15,25 +22,21 @@ font-size: var(--font-size-300); line-height: 28px; } + img { width: 24px; height: 28px; } } .AvatarLarge { - display: flex; height: 60px; width: 60px; - border-radius: var(--border-radius-half); - background-color: var(--surface-decorative-four); - justify-content: center; - align-items: center; + span { - display: flex; padding: 9px; font-size: var(--font-size-400); - line-height: 28px; } + img { width: 37px; height: 42px; @@ -41,19 +44,14 @@ } .AvatarSmall { - display: flex; height: 32px; width: 32px; - border-radius: var(--border-radius-half); - background-color: var(--surface-decorative-two); - justify-content: center; - align-items: center; + span { - display: flex; padding: 4.8px 1.8px; font-size: var(--font-size-100); - line-height: 28px; } + img { width: 20px; height: 22px; @@ -61,19 +59,14 @@ } .AvatarExtraSmall { - display: flex; height: 24px; width: 24px; - border-radius: var(--border-radius-half); - background-color: var(--surface-decorative-one); - justify-content: center; - align-items: center; + span { - display: flex; padding: 2px; font-size: var(--font-size-75); - line-height: 28px; } + img { width: 14px; height: 16px; diff --git a/packages/opub-ui/src/components/Avatar/Avatar.stories.tsx b/packages/opub-ui/src/components/Avatar/Avatar.stories.tsx index 5f159c5a..aed3b1ad 100644 --- a/packages/opub-ui/src/components/Avatar/Avatar.stories.tsx +++ b/packages/opub-ui/src/components/Avatar/Avatar.stories.tsx @@ -8,6 +8,7 @@ import { Meta, StoryObj } from '@storybook/react'; * Reference: https://polaris.shopify.com/components/images-and-icons/avatar */ const meta = { + title: 'Verified/Avatar', component: Avatar, } satisfies Meta; diff --git a/packages/opub-ui/src/components/Avatar/Avatar.tsx b/packages/opub-ui/src/components/Avatar/Avatar.tsx index 0ac5d07c..c0402bca 100644 --- a/packages/opub-ui/src/components/Avatar/Avatar.tsx +++ b/packages/opub-ui/src/components/Avatar/Avatar.tsx @@ -48,7 +48,7 @@ const Avatar = ({ ); return ( - +
{image ? ( @@ -57,7 +57,7 @@ const Avatar = ({ )} {showLabel && {name}} - +
); }; diff --git a/packages/opub-ui/src/components/Badge/Badge.module.scss b/packages/opub-ui/src/components/Badge/Badge.module.scss index bacddefd..682605af 100644 --- a/packages/opub-ui/src/components/Badge/Badge.module.scss +++ b/packages/opub-ui/src/components/Badge/Badge.module.scss @@ -3,13 +3,13 @@ .Badge { border-radius: var(--border-radius-3); font-weight: 400; - font-size: var(--space-3); + font-size: var(--font-size-300); padding: var(--space-05) var(--space-2); - background-color: var(--surface-neutral); - color: var(--text); + background-color: var(--surface-subdued); + color: var(--text-default); @media print { - border: solid var(--border-width-1) var(--border); + border: solid var(--border-width-1) var(--border-default); } } @@ -18,7 +18,7 @@ } .statusInfo { - background-color: var(--surface-highlight); + background-color: var(--surface-highlight-default); } .statusAttention { @@ -48,4 +48,5 @@ .PipContainer { margin-left: calc(-1 * var(--space-05)); margin-right: var(--space-1); + margin-top: -5px; } diff --git a/packages/opub-ui/src/components/Badge/Badge.stories.tsx b/packages/opub-ui/src/components/Badge/Badge.stories.tsx index 66c6aa71..eedd797b 100644 --- a/packages/opub-ui/src/components/Badge/Badge.stories.tsx +++ b/packages/opub-ui/src/components/Badge/Badge.stories.tsx @@ -1,5 +1,5 @@ -import { Meta, StoryObj } from '@storybook/react'; import { Badge } from './Badge'; +import { Meta, StoryObj } from '@storybook/react'; /** * Badges are used to inform user of the status of an object or of an action that’s been taken. @@ -8,6 +8,7 @@ import { Badge } from './Badge'; */ const meta = { + title: 'Verified/Badge', component: Badge, } satisfies Meta; diff --git a/packages/opub-ui/src/components/Badge/components/Pip/Pip.module.scss b/packages/opub-ui/src/components/Badge/components/Pip/Pip.module.scss index 1afb9973..0c96f3ec 100644 --- a/packages/opub-ui/src/components/Badge/components/Pip/Pip.module.scss +++ b/packages/opub-ui/src/components/Badge/components/Pip/Pip.module.scss @@ -1,6 +1,6 @@ .Pip { --pc-pip-size: var(--space-2); - --pc-pip-color: var(--icon); + --pc-pip-color: var(--icon-default); display: inline-block; color: var(--pc-pip-color); height: var(--pc-pip-size); @@ -19,11 +19,11 @@ } .statusNew { - --pc-pip-color: var(--icon); + --pc-pip-color: var(--icon-default); } .statusAttention { - --pc-pip-color: var(--icon-attention); + --pc-pip-color: var(--icon-highlight); } .statusWarning { diff --git a/packages/opub-ui/src/components/Breadcrumbs/Breadcrumbs.module.scss b/packages/opub-ui/src/components/Breadcrumbs/Breadcrumbs.module.scss index 4273bc44..0497c680 100644 --- a/packages/opub-ui/src/components/Breadcrumbs/Breadcrumbs.module.scss +++ b/packages/opub-ui/src/components/Breadcrumbs/Breadcrumbs.module.scss @@ -14,7 +14,7 @@ } .List > .active { - color: var(--focused); + color: var(--border-focus); } .ListItem { @@ -30,16 +30,17 @@ a { cursor: pointer; + color: inherit; &:hover { text-decoration: underline; - color: var(--text); + color: var(--text-default); } } &:last-of-type { > span { - font-weight: var(--font-weight-medium); + font-weight: 500; } } } @@ -51,7 +52,7 @@ .CollapseToggle { font-size: var(--font-size-100); - color: var(--interactive-hovered); + // color: var(--interactive-hovered); cursor: pointer; &:hover { diff --git a/packages/opub-ui/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/packages/opub-ui/src/components/Breadcrumbs/Breadcrumbs.stories.tsx index 27ccbd60..39c343f1 100644 --- a/packages/opub-ui/src/components/Breadcrumbs/Breadcrumbs.stories.tsx +++ b/packages/opub-ui/src/components/Breadcrumbs/Breadcrumbs.stories.tsx @@ -8,6 +8,7 @@ import { Meta, StoryObj } from '@storybook/react'; */ const meta = { + title: 'Verified/Breadcrumbs', component: Breadcrumbs, } satisfies Meta; diff --git a/packages/opub-ui/src/components/Button/Button.module.scss b/packages/opub-ui/src/components/Button/Button.module.scss index 9f32584b..5ef17b39 100644 --- a/packages/opub-ui/src/components/Button/Button.module.scss +++ b/packages/opub-ui/src/components/Button/Button.module.scss @@ -5,7 +5,7 @@ (36px - var(--font-line-height-2) - var(--space-05)) / 2 ); - @include recolor-icon(var(--icon)); + @include recolor-icon(var(--icon-default)); @include focus-ring($border-width: var(--border-width-1)); @@ -18,13 +18,12 @@ margin: 0; padding: $vertical-padding var(--space-4); - background: var(--surface); - box-shadow: var(--shadow-button); + background: var(--background-solid-default); + box-shadow: var(--shadow-button-default); border-radius: var(--border-radius-1); color: var(--text); - border: var(--border-width-1) solid var(--border-neutral-subdued); + border: var(--border-width-1) solid var(--border-subdued); border-top-color: var(--border-subdued); - border-bottom-color: var(--border-shadow-subdued); line-height: 1; text-align: center; cursor: pointer; @@ -37,15 +36,15 @@ } &:focus-visible { - box-shadow: var(--shadow-button); + box-shadow: var(--shadow-button-default); outline: 0; @include focus-ring($style: 'focused'); } &:active { - background: var(--surface-pressed); - box-shadow: var(--shadow-button); + background: var(--surface-selected); + box-shadow: var(--shadow-button-default); &::after { border: none; @@ -54,10 +53,8 @@ } &.pressed { - background: var(--surface-pressed); - box-shadow: var(--shadow-inset-button-pressed); - color: var(--text); - border-color: var(--border-depressed); + background: var(--surface-selected); + color: var(--text-default); @include recolor-icon(currentColor); } @@ -73,7 +70,7 @@ background: var(--button-color); border-width: 0; border-color: transparent; - box-shadow: var(--shadow-button), var(--shadows-inset-button); + box-shadow: var(--shadow-button-default), var(--shadow-inset-button); color: var(--button-text); @@ -86,13 +83,13 @@ &:focus { border-color: $border-color; - box-shadow: var(--shadow-button), var(--shadows-inset-button); + box-shadow: var(--shadow-button-default), var(--shadow-inset-button); } &:active { background: var(--button-color-active); border-color: $border-color; - box-shadow: var(--shadow-button), var(--shadows-inset-button); + box-shadow: var(--shadow-button-default), var(--shadow-inset-button); } &.pressed { @@ -100,12 +97,12 @@ background: var(--button-color-depressed); border-color: $border-color; - box-shadow: var(--shadow-button), var(--shadows-inset-button); + box-shadow: var(--shadow-button-default), var(--shadow-inset-button); &:hover, &:focus { background: var(--button-color-depressed); - box-shadow: var(--shadow-button), var(--shadows-inset-button); + box-shadow: var(--shadow-button-default), var(--shadow-inset-button); } } } @@ -184,7 +181,7 @@ .Content { font-size: var(--font-size-100); - font-weight: var(--font-weight-medium); + font-weight: 500; line-height: var(--font-line-height-1); text-transform: initial; @@ -247,7 +244,6 @@ } .Icon { - margin-left: calc(-1 * (var(--space-1))); line-height: 0; &:last-child { @@ -294,7 +290,7 @@ --button-color-active: var(--action-primary-basic-pressed); --button-color-depressed: var(--action-primary-basic-depressed); - @include recolor-icon(var(--icon-on-primary)); + @include recolor-icon(var(--icon-onbg-default)); &.disabled { background: var(--action-primary-disabled); @@ -330,7 +326,7 @@ --button-color-active: var(--action-primary-interactive-pressed); --button-color-depressed: var(--action-primary-interactive-depressed); - @include recolor-icon(var(--icon-on-primary)); + @include recolor-icon(var(--icon-onbg-default)); &.disabled { background: var(--action-primary-disabled); @@ -366,7 +362,7 @@ --button-color-active: var(--action-primary-critical-pressed); --button-color-depressed: var(--action-primary-critical-depressed); - @include recolor-icon(var(--icon-on-primary)); + @include recolor-icon(var(--icon-onbg-default)); &.disabled { background: var(--action-primary-disabled); @@ -402,7 +398,7 @@ --button-color-active: var(--action-primary-success-pressed); --button-color-depressed: var(--action-primary-success-depressed); - @include recolor-icon(var(--icon-on-primary)); + @include recolor-icon(var(--icon-onbg-default)); &.disabled { background: var(--action-primary-disabled); @@ -471,7 +467,7 @@ color: var(--text-highlight); > .Content { - font-weight: var(--font-weight-regular); + font-weight: 400; @include focus-ring; } @@ -575,7 +571,7 @@ .Content { font-size: var(--font-size-200); - font-weight: var(--font-weight-medium); + font-weight: 500; line-height: var(--font-line-height-2); text-transform: initial; diff --git a/packages/opub-ui/src/components/Button/Button.stories.tsx b/packages/opub-ui/src/components/Button/Button.stories.tsx index d269d173..4599e755 100644 --- a/packages/opub-ui/src/components/Button/Button.stories.tsx +++ b/packages/opub-ui/src/components/Button/Button.stories.tsx @@ -10,6 +10,7 @@ import { IconSelector } from '@tabler/icons-react'; * Reference: https://polaris.shopify.com/components/actions/button */ const meta = { + title: 'Verified/Button', component: Button, } satisfies Meta; diff --git a/packages/opub-ui/src/components/Button/Button.tsx b/packages/opub-ui/src/components/Button/Button.tsx index 7d35107e..0d6e032c 100644 --- a/packages/opub-ui/src/components/Button/Button.tsx +++ b/packages/opub-ui/src/components/Button/Button.tsx @@ -229,7 +229,7 @@ const Button = React.forwardRef( tabIndex={disclosureDisabled ? -1 : undefined} > - + ); diff --git a/packages/opub-ui/src/components/ButtonGroup/ButtonGroup.stories.tsx b/packages/opub-ui/src/components/ButtonGroup/ButtonGroup.stories.tsx index ad5aa590..dce3a033 100644 --- a/packages/opub-ui/src/components/ButtonGroup/ButtonGroup.stories.tsx +++ b/packages/opub-ui/src/components/ButtonGroup/ButtonGroup.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from '@storybook/react'; import { Button } from '../Button'; import { ButtonGroup } from './ButtonGroup'; +import { Meta, StoryObj } from '@storybook/react'; /** * Button group displays multiple related actions stacked or in a horizontal row to help with arrangement and spacing. @@ -8,6 +8,7 @@ import { ButtonGroup } from './ButtonGroup'; * Reference: https://polaris.shopify.com/components/actions/button-group */ const meta = { + title: 'Verified/ButtonGroup', component: ButtonGroup, } satisfies Meta; diff --git a/packages/opub-ui/src/components/Dialog/Dialog.module.scss b/packages/opub-ui/src/components/Dialog/Dialog.module.scss index 566179c3..e48af3e0 100644 --- a/packages/opub-ui/src/components/Dialog/Dialog.module.scss +++ b/packages/opub-ui/src/components/Dialog/Dialog.module.scss @@ -8,7 +8,7 @@ $large-width: 980px; .Container { position: fixed; - z-index: var(--z-11); + z-index: var(--z-max); top: 0; right: 0; bottom: 0; @@ -64,7 +64,7 @@ $large-width: 980px; } .Overlay { - background-color: var(--backdrop); + background-color: var(--surface-backdrop); position: fixed; inset: 0; will-change: transform, opacity; @@ -80,14 +80,15 @@ $large-width: 980px; } .Dialog { - --content-bg: var(--surface); + --content-bg: var(--surface-default); --show-from: translate(-50%, 5vh); --show-to: translate(-50%, 10vh); --hide-from: translate(-50%, 10vh); --hide-to: translate(-50%, 5vh); z-index: var(--z-1); + background-color: var(--content-bg); - box-shadow: var(--shadow-2xl); + box-shadow: var(--shadow-basic-2xl); width: 100%; max-height: calc(100vh - #{$vertical-spacing}); diff --git a/packages/opub-ui/src/components/Dialog/Dialog.stories.tsx b/packages/opub-ui/src/components/Dialog/Dialog.stories.tsx index cf8c368b..5ed5a2e7 100644 --- a/packages/opub-ui/src/components/Dialog/Dialog.stories.tsx +++ b/packages/opub-ui/src/components/Dialog/Dialog.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from '@storybook/react'; import { Button } from '../Button'; import { Dialog } from './Dialog'; +import { Meta, StoryObj } from '@storybook/react'; /** * A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. @@ -8,6 +8,7 @@ import { Dialog } from './Dialog'; * Reference: https://www.radix-ui.com/docs/primitives/components/dialog */ const meta = { + title: 'Verified/Dialog', component: Dialog.Content, } satisfies Meta; diff --git a/packages/opub-ui/src/components/Icon/Icon.module.scss b/packages/opub-ui/src/components/Icon/Icon.module.scss index 4c64d554..1f5e05b2 100644 --- a/packages/opub-ui/src/components/Icon/Icon.module.scss +++ b/packages/opub-ui/src/components/Icon/Icon.module.scss @@ -9,10 +9,6 @@ max-height: 100%; max-width: 100%; color: currentColor; - - svg { - fill: var(--fill); - } } .hasBackdrop { @@ -32,130 +28,64 @@ } } -.colorBase { - svg { - color: var(--icon); - } - - &::before { - background-color: var(--surface-neutral); - } -} - .colorDefault { svg { color: var(--icon-default); } - - &::before { - background-color: var(--surface-neutral); - } } -.colorSubdued svg { - color: var(--icon-subdued); +.colorSubdued { + svg { + color: var(--icon-subdued); + } } .colorCritical { svg { color: var(--icon-critical); } - - &::before { - background-color: var(--surface-critical); - } } -.colorInteractive svg { - color: var(--interactive); +.colorInteractive { + svg { + color: var(--interactive); + } } .colorWarning { svg { color: var(--icon-warning); } - - &::before { - background-color: var(--surface-warning); - } } .colorHighlight { svg { color: var(--icon-highlight); } - - &::before { - background-color: var(--surface-highlight); - } } .colorSuccess { svg { color: var(--icon-success); } - - &::before { - background-color: var(--surface-success); - } -} - -.colorDecorative1 { - svg { - color: var(--icon-decorative-one); - } - - &::before { - background-color: var(--surface-decorative-one); - } -} - -.colorDecorative2 { - svg { - color: var(--icon-decorative-two); - } - - &::before { - background-color: var(--surface-decorative-two); - } } -.colorDecorative3 { +.colorOnBgDefault { svg { - color: var(--icon-decorative-three); - } - - &::before { - background-color: var(--surface-decorative-three); + color: var(--icon-onbg-default); } } -.colorDecorative4 { +.colorOnBgSubdued { svg { - color: var(--icon-decorative-four); - } - - &::before { - background-color: var(--surface-decorative-four); + color: var(--icon-onbg-subdued); } } -.colorDecorative5 { +.colorOnBgDisabled { svg { - color: var(--icon-decorative-five); + color: var(--icon-onbg-disabled); } - - &::before { - background-color: var(--surface-decorative-five); - } -} - -.colorPrimary svg { - color: var(--action-primary); -} - -.colorMagic svg { - color: var(--color-icon-magic); } .Svg, diff --git a/packages/opub-ui/src/components/Icon/Icon.stories.tsx b/packages/opub-ui/src/components/Icon/Icon.stories.tsx index df7ce604..24f0cbf7 100644 --- a/packages/opub-ui/src/components/Icon/Icon.stories.tsx +++ b/packages/opub-ui/src/components/Icon/Icon.stories.tsx @@ -1,6 +1,7 @@ +import { PropsVariationSection } from '../../utils'; +import { Icon } from './Icon'; import { AddCodeMajor } from '@shopify/polaris-icons'; import { Meta, StoryObj } from '@storybook/react'; -import { Icon } from './Icon'; /** * Icons are used to visually communicate core parts of the product and available actions. @@ -8,6 +9,7 @@ import { Icon } from './Icon'; * Reference: https://polaris.shopify.com/components/images-and-icons/icon */ const meta = { + title: 'Verified/Icon', component: Icon, } satisfies Meta; @@ -17,6 +19,44 @@ type Story = StoryObj; export const Default: Story = { args: { source: AddCodeMajor, - color: 'base', + color: 'default', }, }; + +export const Colors = () => ( + +); + +export const BgColors = () => ( +
+ +
+); diff --git a/packages/opub-ui/src/components/Icon/Icon.tsx b/packages/opub-ui/src/components/Icon/Icon.tsx index ae6bb4aa..888b7d0b 100644 --- a/packages/opub-ui/src/components/Icon/Icon.tsx +++ b/packages/opub-ui/src/components/Icon/Icon.tsx @@ -7,24 +7,14 @@ import React from 'react'; export function Icon({ source, - color, + color = 'default', backdrop, accessibilityLabel, size, stroke, - fill, className, noEvents, }: IconProps) { - let sourceType: 'function' | 'placeholder' | 'external'; - if (typeof source === 'function' || typeof source === 'object') { - sourceType = 'function'; - } else if (source === 'placeholder') { - sourceType = 'placeholder'; - } else { - sourceType = 'external'; - } - const classes = cx( styles.Icon, color && styles[variationName('color', color)], @@ -40,32 +30,6 @@ export function Icon({ : Number(size) * 4 : 20; - const contentMarkup = { - function: ( -