diff --git a/libs/core/.storybook/preview-body.html b/libs/core/.storybook/preview-body.html index c14fe307e..2acb5d53b 100644 --- a/libs/core/.storybook/preview-body.html +++ b/libs/core/.storybook/preview-body.html @@ -13,7 +13,7 @@ color: #343332; h1, h2, h3, h4, h5, h6 { - font-family: "GreetStandard"; + font-family: "Greet Standard"; margin-block: 0 8px; } diff --git a/libs/core/package.json b/libs/core/package.json index 8ff28679f..c8e284ab2 100644 --- a/libs/core/package.json +++ b/libs/core/package.json @@ -42,7 +42,7 @@ "build.stencil": "stencil build --docs", "build.storybook": "storybook build", "build.ts": "tsc -p scripts/tsconfig.json", - "build.tokens": "node scripts/sd-transforms.mjs", + "build.tokens": "node scripts/style-dictionary/transform.mjs", "deploy": "npm run build.all", "generate": "stencil generate", "lint": "run-p lint.*", diff --git a/libs/core/scripts/sd-transforms.mjs b/libs/core/scripts/sd-transforms.mjs deleted file mode 100644 index 3d4409735..000000000 --- a/libs/core/scripts/sd-transforms.mjs +++ /dev/null @@ -1,50 +0,0 @@ -import { register } from '@tokens-studio/sd-transforms'; -import fs from 'fs-extra'; -import StyleDictionary from 'style-dictionary'; - -register(StyleDictionary); - -const basePath = `src/global/styles/tokens`; - -// Dynamically get token set names from folder names -const getTokenSetNamesFromFolders = (path) => { - let tokenSets = []; - fs.readdirSync(path, { withFileTypes: true }) - .filter(dirent => dirent.isDirectory()) - .map(dirent => tokenSets.push(dirent.name)); - - return tokenSets; -} - -// Set up Style Dictionary config -const getConfig = (sets) => { - return { - source: sets.map(tokenSet => `${basePath}/${tokenSet}/${tokenSet}.json`), - preprocessors: ['tokens-studio'], - platforms: { - css: { - transformGroup: 'tokens-studio', - transforms: ['name/kebab', 'color/hex', 'ts/resolveMath', 'size/px'], - buildPath: `${basePath}/`, - // Create multiple outputs for each token set - files: sets.map(tokenSet => ({ - // Make sure only the tokens originating from this set are output - filter: token => token.filePath === `${basePath}/${tokenSet}/${tokenSet}.json`, - destination: `${tokenSet}/_${tokenSet}.scss`, - format: 'css/variables' - })), - options: { - showFileHeader: false - }, - prefix: 'pine' - } - }, - }; -}; - -const tokenSets = getTokenSetNamesFromFolders(basePath); -const cfg = getConfig(tokenSets); -const sd = new StyleDictionary(cfg); - -await sd.cleanAllPlatforms(); -await sd.buildAllPlatforms(); diff --git a/libs/core/scripts/style-dictionary/filters/component.mjs b/libs/core/scripts/style-dictionary/filters/component.mjs new file mode 100644 index 000000000..1c7bff24c --- /dev/null +++ b/libs/core/scripts/style-dictionary/filters/component.mjs @@ -0,0 +1,7 @@ +import { basePath } from "../utils.mjs"; + +// filters tokens by themable and from which tokenset they originate +// must match per component name, in this repository we currently only have "button" +export const componentFilter = + (cat) => + (token) => token.filePath.startsWith(`${basePath}/components/${cat}.json`); diff --git a/libs/core/scripts/style-dictionary/filters/core.mjs b/libs/core/scripts/style-dictionary/filters/core.mjs new file mode 100644 index 000000000..a9fa661d4 --- /dev/null +++ b/libs/core/scripts/style-dictionary/filters/core.mjs @@ -0,0 +1 @@ +export const coreFilter = (token) => token.filePath.endsWith("base/core.json"); diff --git a/libs/core/scripts/style-dictionary/filters/index.mjs b/libs/core/scripts/style-dictionary/filters/index.mjs new file mode 100644 index 000000000..56f4a3d9b --- /dev/null +++ b/libs/core/scripts/style-dictionary/filters/index.mjs @@ -0,0 +1,3 @@ +export { coreFilter } from "./core.mjs"; +export { componentFilter } from './component.mjs'; +export { semanticFilter } from "./semantic.mjs"; diff --git a/libs/core/scripts/style-dictionary/filters/semantic.mjs b/libs/core/scripts/style-dictionary/filters/semantic.mjs new file mode 100644 index 000000000..51e293fac --- /dev/null +++ b/libs/core/scripts/style-dictionary/filters/semantic.mjs @@ -0,0 +1,23 @@ + import fs from 'fs-extra'; + + import { basePath } from '../utils.mjs'; + +// filters only tokens originating from semantic sets (not core, not components) and also check themeable or not +export const semanticFilter = + (themeable = false) => + (token) => { + // const themeDimensions = ["brand"]; + const tokenThemable = Boolean(token.attributes.themeable); + + const brandDimensions = fs.readdirSync(`${basePath}/brand`); + return ( + themeable === tokenThemable && + [...brandDimensions, "semantic"].some((cat) => { + return ( + token.filePath.startsWith(`${basePath}/base/${cat}`) || + token.filePath.startsWith(`${basePath}/brand/${cat}`) + ); + } + ) + ); + }; diff --git a/libs/core/scripts/style-dictionary/generators/component.mjs b/libs/core/scripts/style-dictionary/generators/component.mjs new file mode 100644 index 000000000..cc8f44960 --- /dev/null +++ b/libs/core/scripts/style-dictionary/generators/component.mjs @@ -0,0 +1,32 @@ +import fs from 'fs-extra' +import { outputReferencesTransformed } from "style-dictionary/utils"; +import { componentFilter } from "../filters/index.mjs"; +import { basePath } from "../utils.mjs"; + +const componentPrefix = 'pds'; +const format = "css/variables"; + +// for each component, filter those specific component tokens and output them +// to the component folder where the component source code will live +export const generateComponentFiles = () => { + const filesArr = []; + + // Generates a list of components from the tokens/components folder + const components = fs.readdirSync(`${basePath}/components`).map((comp) => comp.replace(/.json$/g, "")); + + for (const comp of components) { + // theme-specific outputs + const componentName = `${componentPrefix}-${comp}`; + + filesArr.push({ + format, + filter: componentFilter(comp, true), + options: { + selector: ":host", + outputReferences: outputReferencesTransformed, + }, + destination: `../../../components/${componentName}/${componentName}.tokens.scss`, + }); + } + return filesArr; +}; diff --git a/libs/core/scripts/style-dictionary/generators/core.mjs b/libs/core/scripts/style-dictionary/generators/core.mjs new file mode 100644 index 000000000..0be9cb51c --- /dev/null +++ b/libs/core/scripts/style-dictionary/generators/core.mjs @@ -0,0 +1,11 @@ +import { coreFilter } from "../filters/index.mjs"; + +const format = "css/variables"; + +export const generateCoreFiles = () => [ + { + destination: `base/_core.scss`, + format, + filter: coreFilter + } +]; diff --git a/libs/core/scripts/style-dictionary/generators/index.mjs b/libs/core/scripts/style-dictionary/generators/index.mjs new file mode 100644 index 000000000..5ee63bc21 --- /dev/null +++ b/libs/core/scripts/style-dictionary/generators/index.mjs @@ -0,0 +1,3 @@ +export { generateCoreFiles } from "./core.mjs"; +export { generateComponentFiles } from "./component.mjs"; +export { generateSemanticFiles } from "./semantic.mjs"; diff --git a/libs/core/scripts/style-dictionary/generators/semantic.mjs b/libs/core/scripts/style-dictionary/generators/semantic.mjs new file mode 100644 index 000000000..67a773b3c --- /dev/null +++ b/libs/core/scripts/style-dictionary/generators/semantic.mjs @@ -0,0 +1,25 @@ +import { semanticFilter } from "../filters/semantic.mjs"; + +const format = "css/variables"; + +export const generateSemanticFiles = (theme) => { + const filesArr = []; + const [themeName, mode] = theme.toLowerCase().split('-'); + + // theme-specific outputs + filesArr.push({ + format, + filter: semanticFilter(true), + destination: `brand/${themeName}/styles/${mode}.scss`, + }); + + + // not theme-specific outputs + filesArr.push({ + format, + filter: semanticFilter(false), + destination: `brand/${themeName}/styles/semantic.scss`, + }); + + return filesArr; +}; diff --git a/libs/core/scripts/style-dictionary/transform.mjs b/libs/core/scripts/style-dictionary/transform.mjs new file mode 100644 index 000000000..0ce1e6a80 --- /dev/null +++ b/libs/core/scripts/style-dictionary/transform.mjs @@ -0,0 +1,103 @@ +import { register, permutateThemes } from '@tokens-studio/sd-transforms'; +import {generateCoreFiles, generateComponentFiles, generateSemanticFiles } from './generators/index.mjs'; +import StyleDictionary from 'style-dictionary'; +import { getReferences, usesReferences } from "style-dictionary/utils"; +import { promises } from 'fs'; + +register(StyleDictionary, { + /* options here if needed */ +}); + +const basePath = `src/global/styles/tokens`; + +async function run() { + const $themes = JSON.parse(await promises.readFile(`${basePath}/$themes.json`, 'utf-8')); + const themes = permutateThemes($themes, { separator: '-' }); + + const tokenSets = [ + ...new Set( + Object.values(themes) + .reduce((acc, sets) => [...acc, ...sets], []) + ), + ]; + + const themeableSets = tokenSets.filter(set => { + return !Object.values(themes).every(sets => sets.includes(set)); + }); + + const configs = Object.entries(themes).map(([theme, tokensets]) => ({ + log: { + verbosity: 'verbose', + }, + source: tokensets.map(tokenset => `${basePath}/${tokenset}.json`), + preprocessors: ['tokens-studio'], // <-- since 0.16.0 this must be explicit + platforms: { + css: { + transformGroup: 'tokens-studio', + transforms: ['attribute/themeable', 'name/kebab', 'color/hex', 'ts/resolveMath', 'size/px'], + buildPath: `${basePath}/`, + files: [ + ...generateCoreFiles(), + ...generateSemanticFiles(theme), + ...generateComponentFiles(), + ], + prefix: 'pine' + }, + }, + })); + + for (const cfg of configs) { + const sd = new StyleDictionary(cfg); + + /** + * This transform checks for each token whether that token's value could change + * due to Tokens Studio theming. + * Any tokenset from Tokens Studio marked as "enabled" in the $themes.json is considered + * a set in which any token could change if the theme changes. + * Any token that is inside such a set or is a reference with a token in that reference chain + * that is inside such a set, is considered "themeable", + * which means it could change by theme switching. + * + * This metadata is applied to the token so we can use it as a way of filtering outputs + * later in the "format" stage. + */ + sd.registerTransform({ + name: "attribute/themeable", + type: "attribute", + transform: (token) => { + function isPartOfEnabledSet(token) { + const pathRegex = new RegExp(`^${basePath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`, "g"); + const set = token.filePath + .replace(pathRegex, "") + .replace(/^\/+/g, "") + .replace(/.json$/g, ""); + + return themeableSets.includes(set); + } + + // Set token to themeable if it's part of an enabled set + if (isPartOfEnabledSet(token)) { + return { + themeable: true, + }; + } + + // Set token to themeable if it's using a reference and inside the reference chain + // any one of them is from a themeable set + if (usesReferences(token.original.value)) { + const refs = getReferences(token.original.value, sd.tokens); + if (refs.some((ref) => isPartOfEnabledSet(ref))) { + return { + themeable: true, + }; + } + } + }, + }); + + await sd.cleanAllPlatforms(); + await sd.buildAllPlatforms(); + } +} + +run(); diff --git a/libs/core/scripts/style-dictionary/utils.mjs b/libs/core/scripts/style-dictionary/utils.mjs new file mode 100644 index 000000000..056a472c8 --- /dev/null +++ b/libs/core/scripts/style-dictionary/utils.mjs @@ -0,0 +1 @@ +export const basePath = `src/global/styles/tokens`; diff --git a/libs/core/src/components/_internal/pds-label/pds-label.scss b/libs/core/src/components/_internal/pds-label/pds-label.scss deleted file mode 100644 index d0cf67e91..000000000 --- a/libs/core/src/components/_internal/pds-label/pds-label.scss +++ /dev/null @@ -1,14 +0,0 @@ -:host { - display: inline-block; -} - -label, pds-label { - --color-text-default: var(--pine-color-grey-950); - --color-text-disabled: var(--pine-color-grey-600); - - color: var(--color-text-default); - - [disabled] &, *:disabled & { - color: var(--color-text-disabled); - } -} diff --git a/libs/core/src/components/pds-accordion/pds-accordion.scss b/libs/core/src/components/pds-accordion/pds-accordion.scss index e1dd1f1ec..d8f6b074e 100644 --- a/libs/core/src/components/pds-accordion/pds-accordion.scss +++ b/libs/core/src/components/pds-accordion/pds-accordion.scss @@ -3,29 +3,14 @@ } details { - --border-radius-default: var(--pine-border-radius-default); - - --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300); - - --color-background-default: var(--pine-color-white); - --color-background-hover: var(--pine-color-grey-150); - --color-text-default: var(--pine-color-text-interactive-default); - --color-text-active: var(--pine-color-grey-950); - --color-text-hover: var(--pine-color-grey-800); - - --font-weight-active: var(--pine-font-weight-semi-bold); + // TODO: Needs discussion + --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring); + --color-text-hover: var(--pine-color-text-secondary); --number-animation-transform-timing: 200ms; - --spacing-details-padding-inline: var(--pine-spacing-150); - --spacing-details-padding-block-end: calc(var(--pine-spacing-200) + 2); //18 + 2 = 18px - --spacing-summary-padding-block: calc(var(--pine-spacing-150) / 2); //12 / 2 = 6px - --spacing-summary-padding-inline-start: var(--pine-spacing-100); - --spacing-summary-padding-inline-end: var(--pine-spacing-050); - - --typography-default: var(--pine-typography-body-md-medium); - border-radius: var(--border-radius-default); + border-radius: var(--pine-dimension-xs); pds-icon { transform: scaleY(1); @@ -34,11 +19,11 @@ details { /* stylelint-disable-next-line */ details[open] { - background-color: var(--color-background-default); + background-color: var(--pine-color-background-container); summary { - color: var(--color-text-active); - font-weight: var(--font-weight-active); + color: var(--pine-color-text-active); + font-weight: var(--pine-font-weight-semi-bold); pds-icon { transform: scaleY(-1); @@ -47,13 +32,17 @@ details[open] { } summary { - background-color: var(--color-background-default); - border-radius: var(--border-radius-default); - color: var(--color-text-default); - font: var(--typography-default); - padding-block: var(--spacing-summary-padding-block); - padding-inline-end: var(--spacing-summary-padding-inline-end); - padding-inline-start: var(--spacing-summary-padding-inline-start); + background-color: var(--pine-color-background-container); + border-radius: var(--pine-dimension-xs); + color: var(--pine-color-text); + font-family: var(--pine-font-family-body); + font-size: var(--pine-font-size-body-md); + font-weight: var(--pine-font-weight-medium); + letter-spacing: var(--pine-letter-spacing); + line-height: var(--pine-line-height-body); + padding-block: calc(var(--pine-dimension-2xs) * 1.5); + padding-inline-end: var(var(--pine-dimension-2xs)); + padding-inline-start: var(var(--pine-dimension-xs)); // Removes marker on Firefox/Chrome /* stylelint-disable-next-line */ @@ -66,7 +55,7 @@ summary { } &:hover { - background: var(--color-background-hover); + background: var(--pine-color-background-container-hover); color: var(--color-text-hover); cursor: pointer; } @@ -84,6 +73,6 @@ summary { } .pds-accordion__body { - padding-block-end: var(--spacing-details-padding-block-end); - padding-inline: var(--spacing-details-padding-inline); + padding-block-end: calc(var(--pine-dimension-sm) + 2); + padding-inline: calc(var(--pine-dimension-2xs) * 1.5); } diff --git a/libs/core/src/components/pds-accordion/pds-accordion.tsx b/libs/core/src/components/pds-accordion/pds-accordion.tsx index c867f3a55..b8b55ec88 100644 --- a/libs/core/src/components/pds-accordion/pds-accordion.tsx +++ b/libs/core/src/components/pds-accordion/pds-accordion.tsx @@ -9,7 +9,7 @@ import { downSmall } from '@pine-ds/icons/icons'; */ @Component({ tag: 'pds-accordion', - styleUrls: ['../../global/styles/base.scss','pds-accordion.scss'], + styleUrls: ['pds-accordion.scss'], shadow: true, }) export class PdsAccordion { diff --git a/libs/core/src/components/pds-avatar/pds-avatar.scss b/libs/core/src/components/pds-avatar/pds-avatar.scss index b1f5aa81b..b14542dc9 100644 --- a/libs/core/src/components/pds-avatar/pds-avatar.scss +++ b/libs/core/src/components/pds-avatar/pds-avatar.scss @@ -5,24 +5,16 @@ div { // These custom props are not reachable --color-background-container: var(--pine-color-mercury-050); - --color-background-badge: var(--pine-color-white); - --color-border-badge: var(--pine-color-white); - - --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300); - --border-radius-round: var(--pine-border-radius-round); - --border-radius-none: var(--pine-border-radius-0); - - --spacing-none: var(--pine-spacing-0); align-items: center; background-color: var(--color-background-container); - border-radius: var(--border-radius-admin-round, var(--border-radius-round)); + border-radius: var(--border-radius-admin-round, var(--pine-border-radius-round)); display: inline-flex; justify-content: center; position: relative; :host(.pds-avatar--admin) & { - --border-radius-admin-round: var(--pine-spacing-150); + --border-radius-admin-round: var(--pine-dimension-150); border-radius: var(--border-radius-admin-round); } @@ -40,16 +32,15 @@ div { .pds-avatar__button { --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300); - --border-radius-round: var(--pine-border-radius-round); align-items: center; appearance: none; background: transparent; - border: var(--border-radius-none); - border-radius: var(--border-radius-round); + border: var(--pine-dimension-none); + border-radius: var(--pine-border-radius-round); cursor: pointer; display: flex; - padding: var(--spacing-none); + padding: var(--pine-dimension-none); &:focus-visible { // outline: var(--pine-border-focus); Border radius for outline does not work in Safari @@ -59,17 +50,17 @@ div { } .pds-avatar__badge { - background-color: var(--color-background-badge); - border: var(--border-default); - border-color: var(--color-border-badge); - border-radius: var(--border-radius-round); - bottom: var(--spacing-none); + background-color: var(--pine-color-background-container); + border: var(--pine-border); + border-color: var(--pine-color-secondary); + border-radius: var(--pine-border-radius-round); + bottom: var(--pine-dimension-none); position: absolute; - right: var(--spacing-none); + right: var(--pine-dimension-none); } img { - border-radius: var(--border-radius-admin-round, var(--border-radius-round)); + border-radius: var(--border-radius-admin-round, var(--pine-border-radius-round)); height: 100%; object-fit: cover; width: 100%; diff --git a/libs/core/src/components/pds-avatar/pds-avatar.tsx b/libs/core/src/components/pds-avatar/pds-avatar.tsx index a5c917e79..b4c7d75de 100644 --- a/libs/core/src/components/pds-avatar/pds-avatar.tsx +++ b/libs/core/src/components/pds-avatar/pds-avatar.tsx @@ -6,7 +6,7 @@ import { checkCircleFilled, userFilled } from '@pine-ds/icons/icons'; */ @Component({ tag: 'pds-avatar', - styleUrls: ['../../global/styles/base.scss', 'pds-avatar.scss'], + styleUrls: ['pds-avatar.scss'], shadow: true, }) export class PdsAvatar { diff --git a/libs/core/src/components/pds-box/pds-box.scss b/libs/core/src/components/pds-box/pds-box.scss index 916fb09ee..d5a38b55f 100644 --- a/libs/core/src/components/pds-box/pds-box.scss +++ b/libs/core/src/components/pds-box/pds-box.scss @@ -4,16 +4,6 @@ pds-box { --border-width-default: var(--pine-border-width-thin); --color-background-box: inherit; --color-border-box: inherit; - --sizing-min-height-box: none; - --sizing-min-width-box: none; - - --spacing-gap-xxs: var(--pine-spacing-050); - --spacing-gap-xs: var(--pine-spacing-100); - --spacing-gap-sm: var(--pine-spacing-200); - --spacing-gap-md: var(--pine-spacing-300); - --spacing-gap-lg: var(--pine-spacing-450); - --spacing-gap-xl: var(--pine-spacing-600); - --spacing-gap-xxl: var(--pine-spacing-800); display: block; } @@ -22,8 +12,8 @@ pds-box { background-color: var(--color-background-box); box-sizing: border-box; display: inline-flex; - min-height: var(--sizing-min-height-box); - min-width: var(--sizing-min-width-box); + min-height: var(--pine-dimension-none); + min-width: var(--pine-dimension-none); // The immediate child of the row will fit the width of the row .pds-row > & { @@ -109,7 +99,7 @@ $pine-spacing-tokens: ( } .pds-box--auto { - flex: 0 0 var(--sizing-min-width-box, fit-content); + flex: 0 0 var(--pine-dimension-none, fit-content); min-width: auto; width: auto; } @@ -162,19 +152,19 @@ $pine-spacing-tokens: ( } .pds-border-radius-xs { - border-radius: var(--pine-border-radius-050); + border-radius: var(--pine-dimension-050); } .pds-border-radius-sm { - border-radius: var(--pine-border-radius-075); + border-radius: var(--pine-dimension-075); } .pds-border-radius-md { - border-radius: var(--pine-border-radius-100); + border-radius: var(--pine-dimension-100); } .pds-border-radius-lg { - border-radius: var(--pine-border-radius-200); + border-radius: var(--pine-dimension-200); } .pds-border-radius-circle { @@ -233,31 +223,31 @@ $pine-spacing-tokens: ( } .pds-box-gap-xxs { - gap: var(--spacing-gap-xxs); + gap: var(--pine-dimension-2xs); } .pds-box-gap-xs { - gap: var(--spacing-gap-xs); + gap: var(--pine-dimension-xs); } .pds-box-gap-sm { - gap: var(--spacing-gap-sm); + gap: var(--pine-dimension-sm); } .pds-box-gap-md { - gap: var(--spacing-gap-md); + gap: var(--pine-dimension-md); } .pds-box-gap-lg { - gap: var(--spacing-gap-lg); + gap: var(--pine-dimension-lg); } .pds-box-gap-xl { - gap: var(--spacing-gap-xl); + gap: var(--pine-dimension-xl); } .pds-box-gap-xxl { - gap: var(--spacing-gap-xxl); + gap: var(--pine-dimension-xxl); } // Spacing helpers @@ -266,31 +256,31 @@ $pine-spacing-tokens: ( } .pds-padding-xxs { - padding: var(--spacing-gap-xxs); + padding: var(--pine-dimension-2xs); } .pds-padding-xs { - padding: var(--spacing-gap-xxs); + padding: var(--pine-dimension-2xs); } .pds-padding-sm { - padding: var(--spacing-gap-sm); + padding: var(--pine-dimension-sm); } .pds-padding-md { - padding: var(--spacing-gap-md); + padding: var(--pine-dimension-md); } .pds-padding-lg { - padding: var(--spacing-gap-lg); + padding: var(--pine-dimension-lg); } .pds-padding-xl { - padding: var(--spacing-gap-xl); + padding: var(--pine-dimension-xl); } .pds-padding-xxl { - padding: var(--spacing-gap-xxl); + padding: var(--pine-dimension-xxl); } // Display helpers diff --git a/libs/core/src/components/pds-button/pds-button.scss b/libs/core/src/components/pds-button/pds-button.scss index 9613cd14f..c709072a1 100644 --- a/libs/core/src/components/pds-button/pds-button.scss +++ b/libs/core/src/components/pds-button/pds-button.scss @@ -1,57 +1,9 @@ :host { - --border-radius-default: var(--pine-border-radius-round); - - --border-width-default: var(--pine-border-width-thin); - --border-width-unstyled: var(--pine-border-radius-0); - --color-border-default: transparent; --color-border-disabled: transparent; --color-border-focus: transparent; --color-border-hover: transparent; - // primary - --color-background-primary-default: var(--pine-color-grey-900); - --color-background-primary-disabled: var(--pine-color-grey-100); - --color-background-primary-hover: var(--pine-color-grey-950); - --color-text-primary-default: var(--pine-color-white); - --color-text-primary-disabled: var(--pine-color-grey-400); - --color-outline-primary: var(--pine-color-purple-300); - - // secondary - --color-background-secondary-hover: var(--pine-color-grey-050); - --color-border-secondary-default: var(--pine-color-grey-400); - --color-border-secondary-disabled: var(--pine-color-grey-300); - --color-border-secondary-focus: var(--pine-color-grey-300); - --color-border-secondary-hover: var(--pine-color-grey-500); - --color-text-secondary-default: var(--pine-color-grey-800); - --color-text-secondary-disabled: var(--pine-color-grey-400); - --color-outline-secondary: var(--pine-color-purple-300); - - // accent - --color-background-accent-default: var(--pine-color-purple-500); - --color-background-accent-disabled: var(--pine-color-purple-100); - --color-background-accent-hover: var(--pine-color-purple-600); - --color-text-accent-default: var(--pine-color-white); - --color-text-accent-disabled: var(--pine-color-purple-300); - --color-outline-accent: var(--pine-color-purple-300); - - // destructive - --color-background-destructive-default: var(--pine-color-red-500); - --color-background-destructive-disabled: var(--pine-color-red-100); - --color-background-destructive-hover: var(--pine-color-red-600); - --color-text-destructive-default: var(--pine-color-white); - --color-text-destructive-disabled: var(--pine-color-red-300); - --color-outline-destructive: var(--pine-color-red-300); - - --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0); - --spacing-disclosure-margin-inline-start: var(--pine-spacing-100); - --spacing-icon-margin-inline-end: var(--pine-spacing-100); - --spacing-padding-block: var(--pine-spacing-100); - --spacing-padding-inline: var(--pine-spacing-200); - --spacing-unstyled: var(--pine-spacing-0); - - --typography-default: var(--pine-font-weight-body-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-greet); - display: inline-flex; vertical-align: middle; } @@ -59,18 +11,22 @@ .pds-button { align-items: center; background-color: var(--color-background-default); - border: var(--border-width-default) solid var(--color-border-default); - border-radius: var(--pine-border-radius-circle); - color: var(--color-text-default); + border: var(--pine-border); + border-color: var(--color-border-default); + border-radius: var(--pine-border-radius-round); + color: var(--color-text-default); // Set in the variant classes below display: flex; - font: var(--typography-default); + font-family: var(--pine-font-family-greet); + font-size: var(--pine-font-size-body-md); + font-weight: var(--pine-font-weight-medium); + line-height: var(--pine-line-height-body); min-height: 40px; - padding: var(--spacing-padding-block) var(--spacing-padding-inline); + padding: var(--pine-dimension-xs) var(--pine-dimension-sm); pds-icon { color: currentColor; fill: currentColor; - margin-inline-end: var(--spacing-icon-margin-inline-end); + margin-inline-end: var(--pine-dimension-xs); } &:hover { @@ -79,7 +35,7 @@ } &:focus-visible { - --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300); + --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring); border-color: var(--color-border-focus); // outline: var(--pine-border-focus); Border radius for outline does not work in Safari box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari @@ -94,33 +50,39 @@ } .pds-button--primary { - --color-background-default: var(--color-background-primary-default); - --color-background-hover: var(--color-background-primary-hover); - --color-background-disabled: var(--color-background-primary-disabled); - --color-text-default: var(--color-text-primary-default); - --color-text-disabled: var(--color-text-primary-disabled); - --color-outline: var(--color-outline-primary); + --color-background-default: var(--pine-color-primary); + --color-background-hover: var(--pine-color-primary-hover); + --color-background-disabled: var(--pine-color-primary-disabled); + --color-border-default: var(--pine-color-primary); + --color-border-hover: var(--pine-color-primary-hover); + --color-text-default: var(--pine-color-text-primary); + --color-text-disabled: var(--pine-color-text-primary-disabled); + --color-outline: var(--pine-color-focus-ring); } .pds-button--accent { - --color-background-default: var(--color-background-accent-default); - --color-background-hover: var(--color-background-accent-hover); - --color-background-disabled: var(--color-background-accent-disabled); - --color-text-default: var(--color-text-accent-default); - --color-text-disabled: var(--color-text-accent-disabled); - --color-outline: var(--color-outline-accent); + --color-background-default: var(--pine-color-accent); + --color-background-hover: var(--pine-color-accent-hover); + --color-background-disabled: var(--pine-color-accent-disabled); + --color-border-default: var(--pine-color-accent); + --color-border-hover: var(--pine-color-accent-hover); + --color-text-default: var(--pine-color-text-primary); + --color-text-disabled: var(--pine-color-text-accent-disabled); + --color-outline: var(--pine-color-focus-ring); } .pds-button--destructive { - --color-background-default: var(--color-background-destructive-default); - --color-background-hover: var(--color-background-destructive-hover); - --color-background-disabled: var(--color-background-destructive-disabled); - --color-text-default: var(--color-text-destructive-default); - --color-text-disabled: var(--color-text-destructive-disabled); - --color-outline: var(--color-outline-destructive); + --color-background-default: var(--pine-color-danger); + --color-background-hover: var(--pine-color-danger-hover); + --color-background-disabled: var(--pine-color-danger-disabled); + --color-border-default: var(--pine-color-danger); + --color-border-hover: var(--pine-color-danger-hover); + --color-text-default: var(--pine-color-text-primary); + --color-text-disabled: var(--pine-color-text-danger-disabled); + --color-outline: var(--pine-color-focus-ring-danger); &:focus-visible { - --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-background-destructive-default); + --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-danger); box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari outline: none; } @@ -131,23 +93,23 @@ --color-background-default: transparent; --color-background-hover: transparent; --color-background-disabled: transparent; - --color-border-disabled: var(--color-border-secondary-disabled); - --color-border-focus: var(--color-border-secondary-focus); - --color-border-hover: var(--color-border-secondary-hover); - --color-border-default: var(--color-border-secondary-default); - --color-text-default: var(--color-text-secondary-default); - --color-text-disabled: var(--color-text-secondary-disabled); - --color-outline: var(--color-outline-secondary); + --color-border-disabled: var(--pine-color-border-disabled); + --color-border-focus: var(--pine-color-border); + --color-border-hover: var(--pine-color-border-hover); + --color-border-default: var(--pine-color-border); + --color-text-default: var(--pine-color-text-secondary); + --color-text-disabled: var(--pine-color-text-secondary-disabled); + --color-outline: var(--pine-color-focus-ring); &:hover { - background-color: var(--color-background-secondary-hover); + background-color: var(--pine-color-secondary-hover); } } .pds-button--disclosure { pds-icon { - margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end); - margin-inline-start: var(--spacing-disclosure-margin-inline-start); + margin-inline-end: var(--pine-dimension-none); + margin-inline-start: var(--pine-dimension-xs); } } @@ -156,9 +118,9 @@ --color-background-hover: transparent; --color-background-disabled: transparent; --color-text-default: inherit; - border: var(--border-width-unstyled); - margin: var(--spacing-unstyled); + border-width: var(--pine-dimension-none); + margin: var(--pine-dimension-none); min-height: auto; - padding: var(--spacing-unstyled); + padding: var(--pine-dimension-none); width: inherit; } diff --git a/libs/core/src/components/pds-button/pds-button.tsx b/libs/core/src/components/pds-button/pds-button.tsx index 32f865893..41bcde00d 100644 --- a/libs/core/src/components/pds-button/pds-button.tsx +++ b/libs/core/src/components/pds-button/pds-button.tsx @@ -11,7 +11,7 @@ import { caretDown } from '@pine-ds/icons/icons'; @Component({ tag: 'pds-button', - styleUrls: ['../../global/styles/base.scss', 'pds-button.scss'], + styleUrls: ['pds-button.scss'], shadow: true, }) export class PdsButton { diff --git a/libs/core/src/components/pds-checkbox/pds-checkbox.scss b/libs/core/src/components/pds-checkbox/pds-checkbox.scss index bcbf38b19..bf15feece 100644 --- a/libs/core/src/components/pds-checkbox/pds-checkbox.scss +++ b/libs/core/src/components/pds-checkbox/pds-checkbox.scss @@ -1,26 +1,6 @@ :host { - --border-default: var(--pine-border-interactive-default); - --border-hover: var(--pine-border-interactive-hover); - - --border-radius: var(--pine-border-radius-050); - - --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300); - --box-shadow-focus-invalid: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-200); - - --color-background: var(--pine-color-white); - --color-background-disabled: var(--pine-color-grey-100); - --color-background-hover: var(--pine-color-grey-100); - --color-background-checked: var(--pine-color-purple-500); - --color-background-checked-hover: var(--pine-color-purple-600); - --color-border-disabled: var(--pine-color-grey-300); - --color-border-icon: var(--pine-color-white); - --color-disabled: var(--pine-color-grey-300); - --color-invalid: var(--pine-color-red-500); - --color-invalid-hover: var(--pine-color-red-600); - --color-text-disabled: var(--pine-color-grey-500); - --color-text-message: var(--pine-color-grey-700); - - --sizing-input: var(--pine-font-size-116); + --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring); + --box-shadow-focus-invalid: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger); align-items: center; display: flex; @@ -29,14 +9,14 @@ :host(.is-invalid) { input { - border-color: var(--color-invalid); + border-color: var(--pine-color-border-danger); &:checked { - background: var(--color-invalid); + background: var( --pine-color-danger); &:hover { - background: var(--color-invalid-hover); - border-color: var(--color-invalid-hover); + background: var(--pine-color-danger-hover); + border-color: var(--pine-color-border-danger-hover); } } @@ -49,22 +29,22 @@ label, .pds-checkbox__message--error { - color: var(--color-invalid); + color: var(--pine-color-text-message-danger); } } :host(.is-indeterminate) { input { - background: var(--color-background-checked); - border-color: var(--color-background-checked); + background: var(--pine-color-accent); + border-color: var(--pine-color-accent); &:hover { - background: var(--color-background-checked-hover); - border-color: var(--color-background-checked-hover); + background: var(--pine-color-accent); + border-color: var(--pine-color-accent-hover); } &::after { - border: 1px solid var(--color-border-icon); + border: 1px solid var(--pine-color-secondary); border-bottom: 0; border-left: 0; border-top: 0; @@ -82,30 +62,30 @@ input { appearance: none; - background-color: var(--color-background); - border: var(--border-default); - border-radius: var(--border-radius); - height: var(--sizing-input); + background-color: var(--pine-color-secondary); + border: var(--pine-border); + border-radius: var(--pine-dimension-2xs); + height: var(--pine-dimension-sm); margin: 0; position: relative; - width: var(--sizing-input); + width: var(--pine-dimension-sm); &:hover { - background: var(--color-background-hover); - border: var(--border-hover); + background: var(--pine-color-secondary-hover); + border: var(--pine-border-hover); } &:checked { - background: var(--color-background-checked); - border-color: var(--color-background-checked); + background: var(--pine-color-accent); + border-color: var(--pine-color-accent); &:hover { - background: var(--color-background-checked-hover); - border-color: var(--color-background-checked-hover); + background: var(--pine-color-accent-hover); + border-color: var(--pine-color-accent-hover); } &::after { - border: 1px solid var(--color-border-icon); + border: 1px solid var(--pine-color-secondary); border-left: 0; border-top: 0; content: ""; @@ -120,26 +100,26 @@ input { } &:disabled { - background: var(--color-background-disabled); - border-color: var(--color-disabled); + background: var(--pine-color-background-container-disabled); + border-color: var(--pine-color-border-disabled); cursor: not-allowed; &:checked { - background: var(--color-disabled); - border-color: var(--color-disabled); + background: var(--pine-color-background-container-disabled); + border-color: var(--pine-color-border-disabled); &::after { - border-color: var(--color-border-disabled); + border-color: var(--pine-color-grey-300); } } + label { - color: var(--color-text-disabled); + color: var(--pine-color-text-disabled); cursor: not-allowed; } ~ .pds-checkbox__message { - color: var(--color-text-disabled); + color: var(--pine-color-text-disabled); } } @@ -169,7 +149,7 @@ label { } .pds-checkbox__message { - color: var(--color-text-message); + color: var(--pine-color-text-message); margin-block-start: 6px; margin-inline-start: 26px; width: 100%; diff --git a/libs/core/src/components/pds-checkbox/pds-checkbox.tsx b/libs/core/src/components/pds-checkbox/pds-checkbox.tsx index dcb3833f9..2ab66e793 100644 --- a/libs/core/src/components/pds-checkbox/pds-checkbox.tsx +++ b/libs/core/src/components/pds-checkbox/pds-checkbox.tsx @@ -6,7 +6,7 @@ import { danger } from '@pine-ds/icons/icons'; @Component({ tag: 'pds-checkbox', - styleUrls: ['../../global/styles/base.scss', 'pds-checkbox.scss'], + styleUrls: ['pds-checkbox.scss'], shadow: true, }) export class PdsCheckbox { diff --git a/libs/core/src/components/pds-chip/pds-chip.scss b/libs/core/src/components/pds-chip/pds-chip.scss index ec6154624..d6746b9b1 100644 --- a/libs/core/src/components/pds-chip/pds-chip.scss +++ b/libs/core/src/components/pds-chip/pds-chip.scss @@ -1,89 +1,54 @@ :host { --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300); - --border-radius: var(--pine-border-radius-200); - - --color-background-accent: var(--pine-color-purple-100); - --color-background-accent-dot: var(--pine-color-purple-600); - --color-background-accent-hover: var(--pine-color-purple-200); - --color-background-danger: var(--pine-color-red-100); - --color-background-danger-dot: var(--pine-color-red-600); - --color-background-danger-hover: var(--pine-color-red-200); - --color-background-info: var(--pine-color-blue-100); - --color-background-info-dot: var(--pine-color-blue-600); - --color-background-info-hover: var(--pine-color-blue-200); - --color-background-neutral: var(--pine-color-grey-100); - --color-background-neutral-dot: var(--pine-color-grey-600); - --color-background-neutral-hover: var(--pine-color-grey-400); - --color-background-success: var(--pine-color-green-100); - --color-background-success-dot: var(--pine-color-green-600); - --color-background-success-hover: var(--pine-color-green-200); - --color-background-warning: var(--pine-color-yellow-100); - --color-background-warning-dot: var(--pine-color-yellow-600); - --color-background-warning-hover: var(--pine-color-yellow-200); - --color-text-accent: var(--pine-color-purple-950); - --color-text-danger: var(--pine-color-red-950); - --color-text-info: var(--pine-color-blue-950); - --color-text-neutral: var(--pine-color-grey-950); - --color-text-success: var(--pine-color-green-950); - --color-text-warning: var(--pine-color-yellow-950); - - --font-size-sm: var(--pine-font-size-body-md); - --font-size-lg: var(--pine-font-size-heading-h6); - --font-weight: var(--pine-font-weight-medium); - - --spacing-xxs: calc(var(--pine-spacing-050) / 2); - --spacing-xs: var(--pine-spacing-050); - --spacing-sm: calc(var(--pine-spacing-150) / 2); - --spacing-md: var(--pine-spacing-100); - --spacing-lg: calc(var(--pine-spacing-250) / 2); - --spacing-xl: var(--pine-spacing-150); - --spacing-xxl: calc(var(--pine-spacing-350) / 2); + + --spacing-sm: calc(var(--pine-dimension-150) / 2); + --spacing-lg: calc(var(--pine-dimension-250) / 2); + --spacing-xl: var(--pine-dimension-150); + --spacing-xxl: calc(var(--pine-dimension-350) / 2); --sizing-close: 10px; - --sizing-close-lg: 24px; - --sizing-dot: 4px; align-items: center; - border-radius: var(--border-radius); + border-radius: var(--pine-dimension-sm); display: inline-flex; - padding-block: var(--spacing-xs); + padding-block: var(--pine-dimension-2xs); padding-inline: var(--spacing-lg); } $pds-chip-sentiment: ( - accent: var(--color-background-accent), - danger: var(--color-background-danger), - info: var(--color-background-info), - neutral: var(--color-background-neutral), - success: var(--color-background-success), - warning: var(--color-background-warning), + accent: var(--pine-chip-color-accent), + danger: var(--pine-chip-color-danger), + info: var(--pine-chip-color-info), + neutral: var(--pine-chip-color-neutral), + success: var(--pine-chip-color-success), + warning: var(--pine-chip-color-warning), ); $pds-chip-sentiment-text: ( - accent: var(--color-text-accent), - danger: var(--color-text-danger), - info: var(--color-text-info), - neutral: var(--color-text-neutral), - success: var(--color-text-success), - warning: var(--color-text-warning), + accent: var(--pine-color-text-accent), + danger: var(--pine-color-text-danger), + info: var(--pine-color-text-info), + neutral: var(--pine-color-text-neutral), + success: var(--pine-color-text-sucess), + warning: var(--pine-color-text-warning), ); $pds-chip-sentiment-dots: ( - accent: var(--color-background-accent-dot), - danger: var(--color-background-danger-dot), - info: var(--color-background-info-dot), - neutral: var(--color-background-neutral-dot), - success: var(--color-background-success-dot), - warning: var(--color-background-warning-dot), + accent: var(--pine-chip-color-accent-dot), + danger: var(--pine-chip-color-danger-dot), + info: var(--pine-chip-color-info-dot), + neutral: var(--pine-chip-color-neutral-dot), + success: var(--pine-chip-color-success-dot), + warning: var(--pine-chip-color-warning-dot), ); $pds-chip-sentiment-hover: ( - accent: var(--color-background-accent-hover), - danger: var(--color-background-danger-hover), - info: var(--color-background-info-hover), - neutral: var(--color-background-neutral-hover), - success: var(--color-background-success-hover), - warning: var(--color-background-warning-hover), + accent: var(--pine-chip-color-accent-hover), + danger: var(--pine-chip-color-danger-hover), + info: var(--pine-chip-color-info-hover), + neutral: var(--pine-chip-color-neutral-hover), + success: var(--pine-chip-color-success-hover), + warning: var(--pine-chip-color-warning-hover), ); @each $sentiment, $value in $pds-chip-sentiment { @@ -118,15 +83,15 @@ $pds-chip-sentiment-hover: ( border: 1px solid transparent; border-radius: 50%; display: inline-block; - height: var(--sizing-dot); - margin-block-end: var(--spacing-xxs); - margin-inline-end: var(--spacing-xs); - width: var(--sizing-dot); + height: var(--pine-dimension-2xs); + margin-block-end: var(--pine-dimension-025); + margin-inline-end: var(--pine-dimension-2xs); + width: var(--pine-dimension-2xs); } .pds-chip__label { - font-size: var(--font-size-sm); - font-weight: var(--font-weight); + font-size: var(--pine-font-size-body-md); + font-weight: var(--pine-font-weight-medium); } // dropdown @@ -135,8 +100,8 @@ $pds-chip-sentiment-hover: ( padding: 0; .pds-chip__dot { - margin-block-end: calc(var(--spacing-xxs) / 4); - margin-block-start: var(--spacing-xxs); + margin-block-end: calc(var(--pine-dimension-025) / 4); + margin-block-start: var(--pine-dimension-025); } } @@ -145,10 +110,10 @@ $pds-chip-sentiment-hover: ( appearance: none; background: transparent; border: 0; - border-radius: var(--border-radius); + border-radius: var(--pine-dimension-sm); display: flex; - font-weight: var(--font-weight); - padding-block: var(--spacing-xs); + font-weight: var(--pine-font-weight-medium); + padding-block: var(--pine-dimension-2xs); padding-inline: var(--spacing-lg); &:focus-visible { @@ -157,15 +122,15 @@ $pds-chip-sentiment-hover: ( } pds-icon { - margin-inline-end: calc(var(--spacing-xxs) * -1); - margin-inline-start: var(--spacing-xs); + margin-inline-end: calc(var(--pine-dimension-025) * -1); + margin-inline-start: var(--pine-dimension-2xs); } } // tag :host(.pds-chip--tag) { - padding-block: var(--spacing-xxs); + padding-block: var(--pine-dimension-025); } .pds-chip__close { @@ -174,8 +139,8 @@ $pds-chip-sentiment-hover: ( border: 0; border-radius: 50%; height: var(--sizing-close); - margin-inline-end: calc(var(--spacing-md) * -1); - margin-inline-start: var(--spacing-xs); + margin-inline-end: calc(var(--pine-dimension-xs) * -1); + margin-inline-start: var(--pine-dimension-2xs); padding: var(--sizing-close); position: relative; width: var(--sizing-close); @@ -196,13 +161,13 @@ $pds-chip-sentiment-hover: ( // large :host(.pds-chip--large) { - font-size: var(--font-size-lg); + font-size: var(--pine-font-size-body-lg); padding-block: var(--spacing-sm); padding-inline: var(--spacing-xxl); &:host(.pds-chip--dropdown) { - padding-block: var(--spacing-xs); - padding-inline: var(--spacing-xxs); + padding-block: var(--pine-dimension-2xs); + padding-inline: var(--pine-dimension-025); .pds-chip__dot { margin-block-end: 0; @@ -210,17 +175,17 @@ $pds-chip-sentiment-hover: ( } .pds-chip__button { - font-size: var(--font-size-lg); + font-size: var(--pine-font-size-body-lg); padding-inline: var(--spacing-xl) } .pds-chip__close { - height: var(--sizing-close-lg); + height: var(--pine-dimension-md); margin-inline-end: calc(var(--spacing-xl) * -1); - width: var(--sizing-close-lg); + width: var(--pine-dimension-md); } &:host(.pds-chip--tag) { - padding-block: var(--spacing-xs); + padding-block: var(--pine-dimension-2xs); } } diff --git a/libs/core/src/components/pds-chip/pds-chip.tokens.scss b/libs/core/src/components/pds-chip/pds-chip.tokens.scss new file mode 100644 index 000000000..562c4a6a7 --- /dev/null +++ b/libs/core/src/components/pds-chip/pds-chip.tokens.scss @@ -0,0 +1,24 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:host { + --pine-chip-color-warning-dot: var(--pine-color-yellow-600); + --pine-chip-color-warning-hover: var(--pine-color-yellow-300); + --pine-chip-color-warning: var(--pine-color-yellow-100); + --pine-chip-color-success-dot: var(--pine-color-green-600); + --pine-chip-color-success-hover: var(--pine-color-green-300); + --pine-chip-color-success: var(--pine-color-green-100); + --pine-chip-color-neutral-dot: var(--pine-color-grey-600); + --pine-chip-color-neutral-hover: var(--pine-color-grey-300); + --pine-chip-color-neutral: var(--pine-color-grey-100); + --pine-chip-color-info-dot: var(--pine-color-blue-600); + --pine-chip-color-info-hover: var(--pine-color-blue-300); + --pine-chip-color-info: var(--pine-color-blue-100); + --pine-chip-color-danger-dot: var(--pine-color-red-600); + --pine-chip-color-danger-hover: var(--pine-color-red-300); + --pine-chip-color-danger: var(--pine-color-red-100); + --pine-chip-color-accent-dot: var(--pine-color-purple-600); + --pine-chip-color-accent-hover: var(--pine-color-purple-300); + --pine-chip-color-accent: var(--pine-color-purple-100); +} diff --git a/libs/core/src/components/pds-chip/pds-chip.tsx b/libs/core/src/components/pds-chip/pds-chip.tsx index c2743c135..9728d781c 100644 --- a/libs/core/src/components/pds-chip/pds-chip.tsx +++ b/libs/core/src/components/pds-chip/pds-chip.tsx @@ -3,7 +3,7 @@ import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core'; @Component({ tag: 'pds-chip', - styleUrls: ['../../global/styles/base.scss', 'pds-chip.scss'], + styleUrls: ['pds-chip.tokens.scss', 'pds-chip.scss'], shadow: true, }) export class PdsChip { diff --git a/libs/core/src/components/pds-copytext/pds-copytext.scss b/libs/core/src/components/pds-copytext/pds-copytext.scss index 6b9327199..6518acfeb 100644 --- a/libs/core/src/components/pds-copytext/pds-copytext.scss +++ b/libs/core/src/components/pds-copytext/pds-copytext.scss @@ -1,56 +1,39 @@ :host(.pds-copytext) { - --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300); - --border-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-400); - --border-radius-default: var(--pine-border-radius-circle); + --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring); - --border-width-default: var(--pine-border-width-none); - - --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300); - - --color-background-default: var(--pine-color-white); - --color-border-interactive-hover: var(--pine-color-grey-400); - --color-text-hover: var(--pine-color-grey-900); // Update custom prop usage in Button before changing --copytext-color-background-hover: var(--pine-color-grey-200); - --font-size-default: var(--pine-font-size-100); - --font-weight-default: var(--pine-font-weight-body-medium); - - --spacing-bordered-margin-inline-end: var(--pine-spacing-200); - --spacing-bordered-padding-block: var(--pine-spacing-100); - --spacing-bordered-padding-inline: var(--pine-spacing-200); - --spacing-margin-inline-end: var(--pine-spacing-100); - --spacing-padding-block: var(--pine-spacing-050); - --spacing-padding-inline: var(--pine-spacing-100); - --spacing-padding-none: var(--pine-spacing-0); - - --typography-default: var(--pine-font-weight-body-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-heading); pds-button { align-items: center; - background: var(--color-background-default); - border: var(--border-width-default); - border-radius: var(--border-radius-default); + background: var(--pine-color-secondary); + border-radius: var(--pine-border-radius-round); + border-width: var(--pine-dimension-none); display: inline-flex; - font: var(--typography-default); + font-family: var(--pine-font-family-heading); + font-size: var(--pine-font-size-body-md); + font-weight: var(--pine-font-weight-body-medium); + letter-spacing: var(--pine-letter-spacing); + line-height: var(--pine-line-height-body); max-width: 100%; - padding: var(--spacing-padding-block) var(--spacing-padding-inline); + padding: var(--pine-dimension-2xs) var(--pine-dimension-xs); &::part(button) { - padding-inline-end: calc(var(--spacing-padding-inline) / 2); + padding-inline-end: calc(var(--pine-dimension-xs) / 2); } &::part(button):hover { // Update custom prop usage in Button before changing background-color: var(--copytext-color-background-hover); - color: var(--color-text-hover); + color: var(--pine-color-text-secondary-hover); } span { - font-weight: var(--font-weight-default); - margin-inline-end: var(--spacing-margin-inline-end); + font-weight: var(--pine-font-weight-medium); + margin-inline-end: var(--pine-dimension-xs); white-space: nowrap; } @@ -62,11 +45,11 @@ // bordered &:host(.pds-copytext--bordered) { - border: var(--border-width-default); - padding: var(--spacing-padding-none); + border-width: var(--pine-dimension-none); + padding: var(--pine-dimension-none); pds-button { - padding: var(--spacing-padding-none); + padding: var(--pine-dimension-none); &:hover { background: none; @@ -74,16 +57,16 @@ } span { - border: var(--border-interactive-default); - border-radius: var(--border-radius-default); - margin-inline-end: var(--spacing-bordered-margin-inline-end); - padding-block: var(--spacing-bordered-padding-block); - padding-inline: var(--spacing-bordered-padding-inline); + border: var(--pine-border); + border-radius: var(--pine-border-radius-round); + margin-inline-end: var(--pine-dimension-sm); + padding-block: var(--pine-dimension-xs); + padding-inline: var(--pine-dimension-sm); } :hover { span { - border: var(--border-interactive-hover); + border: var(--pine-border-hover); } } } diff --git a/libs/core/src/components/pds-copytext/pds-copytext.tsx b/libs/core/src/components/pds-copytext/pds-copytext.tsx index cf9c3ab31..5ebf5e7fe 100644 --- a/libs/core/src/components/pds-copytext/pds-copytext.tsx +++ b/libs/core/src/components/pds-copytext/pds-copytext.tsx @@ -4,7 +4,7 @@ import { copy as copyIcon } from '@pine-ds/icons/icons'; @Component({ tag: 'pds-copytext', - styleUrls: ['../../global/styles/base.scss', 'pds-copytext.scss'], + styleUrls: ['pds-copytext.scss'], shadow: true, }) export class PdsCopytext { diff --git a/libs/core/src/components/pds-divider/docs/pds-divider.mdx b/libs/core/src/components/pds-divider/docs/pds-divider.mdx index b7e5a44c1..c2faab542 100644 --- a/libs/core/src/components/pds-divider/docs/pds-divider.mdx +++ b/libs/core/src/components/pds-divider/docs/pds-divider.mdx @@ -33,7 +33,9 @@ The default divider displays a horizontal line. react: '', webComponent: '' }}> - +
+ +
### Vertical @@ -71,7 +73,9 @@ Offset sizes follow the global spacing sizes: `xxs`: 4px, `xs`: 8px, `sm`: 12px, react: '', webComponent: '' }}> - +
+ +
Below, you will see a vertical divider using a large offset. diff --git a/libs/core/src/components/pds-divider/pds-divider.scss b/libs/core/src/components/pds-divider/pds-divider.scss index bb69ce5df..3a9c2dd91 100644 --- a/libs/core/src/components/pds-divider/pds-divider.scss +++ b/libs/core/src/components/pds-divider/pds-divider.scss @@ -1,28 +1,16 @@ -:host { - --color-background-default: var(--pine-color-grey-200); - --spacing-offset-xxs: var(--pine-spacing-050); - --spacing-offset-xs: var(--pine-spacing-100); - --spacing-offset-sm: var(--pine-spacing-200); - --spacing-offset-md: var(--pine-spacing-300); - --spacing-offset-lg: var(--pine-spacing-450); - --spacing-offset-xxl: var(--pine-spacing-800); -} - $pds-divider-offsets: ( - xxs: var(--spacing-offset-xxs), - xs: var(--spacing-offset-xs), - sm: var(--spacing-offset-sm), - md: var(--spacing-offset-md), - lg: var(--spacing-offset-lg), - xl: var(--spacing-offset-xl), - xxl: var(--spacing-offset-xxl), + xxs: var(--pine-dimension-2xs), + xs: var(--pine-dimension-xs), + sm: var(--pine-dimension-sm), + md: var(--pine-dimension-md), + lg: var(--pine-dimension-lg), + xl: var(--pine-dimension-xl), + xxl: var(--pine-dimension-2xl), ); .pds-divider { - background: var(--color-background-default); - border: 0; + background: var(--pine-color-neutral); display: flex; - height: 1px; margin: 0; width: 100%; } diff --git a/libs/core/src/components/pds-divider/pds-divider.tsx b/libs/core/src/components/pds-divider/pds-divider.tsx index 73565187d..373bab2ac 100644 --- a/libs/core/src/components/pds-divider/pds-divider.tsx +++ b/libs/core/src/components/pds-divider/pds-divider.tsx @@ -2,7 +2,7 @@ import { Component, Prop, Host, h } from '@stencil/core'; @Component({ tag: 'pds-divider', - styleUrls: ['../../global/styles/base.scss', 'pds-divider.scss'], + styleUrls: ['pds-divider.scss'], shadow: true, }) export class PdsDivider { diff --git a/libs/core/src/components/pds-image/pds-image.scss b/libs/core/src/components/pds-image/pds-image.scss index ddba6bab2..c1c82ba22 100644 --- a/libs/core/src/components/pds-image/pds-image.scss +++ b/libs/core/src/components/pds-image/pds-image.scss @@ -1,6 +1,6 @@ :host { /** - * @prop --image-aspect-ratio: The image's aspect ratio. + * @prop --dimension-aspect-ratio: The image's aspect ratio. */ --dimension-aspect-ratio: auto; @@ -9,4 +9,4 @@ img { aspect-ratio: var(--dimension-aspect-ratio); -} \ No newline at end of file +} diff --git a/libs/core/src/components/pds-image/pds-image.tsx b/libs/core/src/components/pds-image/pds-image.tsx index d1cc04656..86fc99917 100644 --- a/libs/core/src/components/pds-image/pds-image.tsx +++ b/libs/core/src/components/pds-image/pds-image.tsx @@ -2,7 +2,7 @@ import { Component, Host, h, Prop } from '@stencil/core'; @Component({ tag: 'pds-image', - styleUrls: ['../../global/styles/base.scss', 'pds-image.scss'], + styleUrls: ['pds-image.scss'], shadow: true, }) export class PdsImage { diff --git a/libs/core/src/components/pds-image/readme.md b/libs/core/src/components/pds-image/readme.md index e0e9214b4..b3852f1c2 100644 --- a/libs/core/src/components/pds-image/readme.md +++ b/libs/core/src/components/pds-image/readme.md @@ -21,9 +21,10 @@ ## CSS Custom Properties -| Name | Description | -| ---------------------- | ------------------------- | -| `--image-aspect-ratio` | The image's aspect ratio. | +| Name | Description | +| -------------------------- | ------------------------- | +| `--dimension-aspect-ratio` | The image's aspect ratio. | +| `--image-aspect-ratio` | The image's aspect ratio. | ---------------------------------------------- diff --git a/libs/core/src/components/pds-input/pds-input.scss b/libs/core/src/components/pds-input/pds-input.scss index 8c1f6b4ee..71f1e0cdf 100644 --- a/libs/core/src/components/pds-input/pds-input.scss +++ b/libs/core/src/components/pds-input/pds-input.scss @@ -2,114 +2,90 @@ --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300); --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-300); - --color-background-disabled: var(--pine-color-grey-100); - --color-background-error: var(--pine-color-red-050); - --color-border-active: var(--pine-color-grey-400); - --color-border-default: var(--pine-color-grey-300); - --color-border-disabled: var(--pine-color-grey-200); - --color-border-error: var(--pine-color-red-600); - --color-border-hover: var(--pine-color-grey-500); - --color-text-default: var(--pine-color-grey-950); - --color-text-disabled: var(--pine-color-grey-600); - --color-text-error: var(--pine-color-red-600); - --color-text-placeholder: var(--pine-color-grey-600); - --color-text-placeholder-disabled: var(--pine-color-grey-400); - - --font-size-helper-message: var(--pine-font-size-085); - --font-size-input-field: var(--pine-font-size-100); - --font-size-label: var(--pine-font-size-100); - --font-weight-helper-message: var(--pine-font-weight-normal); - --font-weight-input-field: var(--pine-font-weight-normal); - --font-weight-label: var(--pine-font-weight-medium); - - --line-height-label: var(--pine-line-height-150); - --line-height-helper-message: var(--pine-line-height-125); - --line-height-input-field: var(--pine-line-height-150); - - --spacing-field-padding-block: var(--pine-spacing-100); - --spacing-input-field-padding-inline: var(--pine-spacing-200); - --spacing-label-margin-block-end: var(--pine-spacing-100); - --spacing-margin-top-helper-message: var(--pine-spacing-100); - --spacing-icon-error-message: var(--pine-spacing-050); - display: inline; } +:host([aria-readonly="true"]) { + input { + background-color: var(--pine-color-background-container-disabled) ; + color: var(--pine-color-text-readonly); + } +} + .pds-input { display: flex; flex-direction: column; } label { - font-size: var(--font-size-label); - font-weight: var(--font-weight-label); - line-height: var(--line-height-label); - margin-block-end: var(--spacing-label-margin-block-end); + color: var(--pine-color-text-label); + font-weight: var(--pine-font-weight-medium); } input { - border: 1px solid var(--color-border-default); + border: 1px solid var(--pine-color-border); border-radius: 10px; - font-size: var(--font-size-input-field); - font-weight: var(--font-weight-input-field); - line-height: var(--line-height-input-field); - padding: var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline); + font-size: var(--pine-font-size); + font-weight: var(--pine-font-weight-regular); + line-height: var(--pine-line-height-body); + padding: var(--pine-dimension-xs) var(--pine-dimension-sm); &:disabled { - background-color: var(--color-background-disabled); - border-color: var(--color-border-disabled); - color: var(--color-text-disabled); + background-color: var(--pine-color-background-container-disabled); + border-color: var(--pine-color-border-disabled); + color: var(--pine-color-text-disabled); cursor: not-allowed; /* stylelint-disable */ &::-webkit-input-placeholder { - color: var(--color-text-placeholder-disabled); + color: var(--pine-color-text-placeholder-disabled); } &::-moz-placeholder { - color: var(--color-text-placeholder-disabled); + color: var(--pine-color-text-placeholder-disabled); } &::-moz-placeholder { - color: var(--color-text-placeholder-disabled); + color: var(--pine-color-text-placeholder-disabled); } &:-ms-input-placeholder { - color: var(--color-text-placeholder-disabled); + color: var(--pine-color-text-placeholder-disabled); } /* stylelint-enable */ } &:hover { - border-color: var(--color-border-hover); + border-color: var(--pine-color-border-hover); } &:focus-visible { - border-color: var(--color-border-active); + border-color: var(--pine-color-border-active); box-shadow: var(--box-shadow-focus); outline: none; } /* stylelint-disable */ &::-webkit-input-placeholder { - color: var(--color-text-placeholder); + color: var(--pine-color-text-placeholder); } &::-moz-placeholder { - color: var(--color-text-placeholder); + color: var(--pine-color-text-placeholder); } &::-moz-placeholder { - color: var(--color-text-placeholder); + color: var(--pine-color-text-placeholder); } &:-ms-input-placeholder { - color: var(--color-text-placeholder); + color: var(--pine-color-text-placeholder); } &:has(~.pds-input__error-message) { - background-color: var(--color-background-error); - border-color: var(--color-border-error); + + background-color: var(--pine-input-color-background-danger); + border-color: var(--pine-color-border-danger); &:focus-visible { box-shadow: var(--box-shadow-focus-error); @@ -121,16 +97,15 @@ input { .pds-input__error-message, .pds-input__helper-message { - font-size: var(--font-size-helper-message); - font-weight: var(--font-weight-helper-message); - line-height: var(--line-height-helper-message); + font-size: var(--pine-font-size); + font-weight: var(--pine-font-weight-medium); margin-block-end: 0; - margin-block-start: var(--spacing-margin-top-helper-message); + margin-block-start: var(--pine-dimension-xs); } .pds-input__error-message { align-items: center; - color: var(--color-text-error); + color: var(--pine-color-text-danger); display: flex; font-size: var(--font-size-helper-message); gap: var(--spacing-icon-error-message); diff --git a/libs/core/src/components/pds-input/pds-input.tokens.scss b/libs/core/src/components/pds-input/pds-input.tokens.scss new file mode 100644 index 000000000..121888751 --- /dev/null +++ b/libs/core/src/components/pds-input/pds-input.tokens.scss @@ -0,0 +1,7 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:host { + --pine-input-color-background-danger: var(--pine-color-red-050); +} diff --git a/libs/core/src/components/pds-input/pds-input.tsx b/libs/core/src/components/pds-input/pds-input.tsx index db9063496..4f48b04fe 100644 --- a/libs/core/src/components/pds-input/pds-input.tsx +++ b/libs/core/src/components/pds-input/pds-input.tsx @@ -1,11 +1,10 @@ import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core'; import { assignDescription, messageId } from '../../utils/form'; -import { PdsLabel } from '../_internal/pds-label/pds-label'; import { danger } from '@pine-ds/icons/icons'; @Component({ tag: 'pds-input', - styleUrls: ['../../global/styles/base.scss', 'pds-input.scss'], + styleUrls: ['pds-input.tokens.scss', '../../global/styles/utils/label.scss', 'pds-input.scss'], shadow: true, }) export class PdsInput { @@ -94,9 +93,10 @@ export class PdsInput { return (
- + { `); }); - it('renders readonly input', async () => { + it('renders required input', async () => { const { root } = await newSpecPage({ components: [PdsInput], html: `` @@ -102,7 +102,7 @@ describe('pds-input', () => { }); expect(root).toEqualHtml(` - +