diff --git a/packages/core/.browserslistrc b/packages/core/.browserslistrc index 01ccd0731..6576bf6c0 100644 --- a/packages/core/.browserslistrc +++ b/packages/core/.browserslistrc @@ -1,2 +1,2 @@ # Browsers that we support -chrome 89 \ No newline at end of file +chrome 96 \ No newline at end of file diff --git a/packages/core/build/build.tokens.ts b/packages/core/build/build.tokens.ts index 17c2895c6..8cf3aeb8d 100644 --- a/packages/core/build/build.tokens.ts +++ b/packages/core/build/build.tokens.ts @@ -102,7 +102,7 @@ function buildJSONTokens(path) { function buildSassTokens(path) { const values = tokens - .map(token => `${tokenToSass(token, false)}\n`) + .map(token => `${tokenToSass(token)}\n`) .join('') .trim(); fs.writeFileSync(path, `// ${experimental}\n${values}`); @@ -111,7 +111,7 @@ function buildSassTokens(path) { function buildCSSTokens(path) { const cssTokens = ` :root { -${tokens.map(token => ` --cds-${camelCaseToKebab(token.name)}: ${convertCSSValue(token, 20, false)};`).join('\n')} +${tokens.map(token => ` ${getTokenCSSName(token)}: ${convertCSSValue(token, false)};`).join('\n')} }`; fs.writeFileSync(path, cssTokens); @@ -132,21 +132,23 @@ ${tokens function tokenToSass(token: Token, fallback = false) { const propName = camelCaseToKebab(token.name); - let staticValue; + let fallbackValue = convertCSSValue(token); if (typeof token.value === 'number') { - staticValue = convertCSSValue(token); - } else if ((typeof token.value === 'string' && token.value.slice(-2) === 'em') || token.config.static) { - staticValue = token.value; + fallbackValue = `${token.value / 16}rem`; // worst case scenario, fallback to base 16 if base 20 not set at root } - const dynamicVar = `$cds-${propName}: var(--cds-${camelCaseToKebab(token.name)}${ - fallback ? `, ${convertCSSValue(token)}` : '' - })${fallback ? '' : ' !default'};`; + if (token.config.raw) { + fallbackValue = token.value; + } + + const dynamicValue = `$cds-${propName}: var(${getTokenCSSName(token)}${ + fallback ? `, ${fallbackValue}` : '' + }) !default;`; + const staticValue = + token.config.static || typeof token.value === 'number' ? `\n$cds-${propName}-static: ${token.value} !default;` : ''; - return `${dynamicVar}${ - token.config.static ? `\n$cds-${propName}-static: ${staticValue}${fallback ? '' : ' !default'};` : '' - }`; + return `${dynamicValue}${staticValue}`; } function flattenTokens(theme: any) { @@ -168,17 +170,19 @@ function flattenTokens(theme: any) { return flatten(theme); } -function convertCSSValue(token: Token, base = 20, fallback = true) { +function convertCSSValue(token: Token, fallback = true) { let value = token.value; if (token.alias instanceof Token) { value = `var(--cds-${camelCaseToKebab(token.alias.name)}${ - fallback ? `, ${convertCSSValue(token.alias, 20, fallback)}` : '' + fallback ? `, ${convertCSSValue(token.alias, fallback)}` : '' })`; - } else if (token.config.static) { + } else if (token.config.raw) { value = token.value; + } else if (token.config.scale) { + value = `calc(${token.value} * var(--cds-${camelCaseToKebab(token.config.scale.name)}))`; } else if (typeof token.value === 'number') { - value = `calc((${token.value} / var(--cds-global-base, ${base})) * 1rem)`; + value = `calc(${token.value} * (1rem / var(--cds-global-base)))`; } else if (isHSL(token.value)) { value = `hsl(${token.value[0]}, ${token.value[1]}%, ${token.value[2]}%)`; } @@ -186,6 +190,10 @@ function convertCSSValue(token: Token, base = 20, fallback = true) { return value; } +function getTokenCSSName(token: Token) { + return `--cds-${camelCaseToKebab(token.name)}`; +} + function camelCaseToKebab(val: string) { return val.replace(/([A-Z]|\d+)/g, '-$1').toLocaleLowerCase(); } diff --git a/packages/core/build/token-utils.ts b/packages/core/build/token-utils.ts index 6f72bcdc0..a09f1f0e6 100644 --- a/packages/core/build/token-utils.ts +++ b/packages/core/build/token-utils.ts @@ -5,7 +5,9 @@ */ export interface CdsTheme { + internal: Tokens; global: { + scale: Tokens; layout: Tokens; space: Tokens; color: Tokens; @@ -20,12 +22,18 @@ export interface Tokens { [key: string]: Token | Tokens; } -export function token(value: any, config: any = {}) { +export function token(value: any, config: TokenConfig = {}) { return new Token(value, config); } export type HSL = [number, number, number]; +export interface TokenConfig { + raw?: boolean; // generate token with no format type conversions (px to rem) + static?: boolean; // generate secondary static variable (wont generate dynamice css var usefull for media queries, calc) + scale?: Token; // set a token scale multiplier on numeric types +} + export class Token { name = ''; private _value: Token | number | string | HSL; @@ -38,7 +46,7 @@ export class Token { return this._value instanceof Token ? this._value : null; } - constructor(value: Token | number | string | HSL, public config: { static?: boolean } = {}) { + constructor(value: Token | number | string | HSL, public config: TokenConfig = {}) { this._value = value; } diff --git a/packages/core/build/tokens.ts b/packages/core/build/tokens.ts index 6b9690b18..d7c52de2a 100644 --- a/packages/core/build/tokens.ts +++ b/packages/core/build/tokens.ts @@ -6,43 +6,62 @@ import { token, CdsTheme } from './token-utils'; +// internal optimization so tokens can refer to pre-calculated values rather than generating/duplicating the same calc over many tokens +const internal = { + scale1: token('calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-layout-space))', { raw: true }), + scale2: token('calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-space))', { raw: true }), + scale3: token('calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-typography))', { raw: true }), +}; + +const base = token(20, { raw: true }); + +const scale = { + space: token(1, { raw: true }), + layoutSpace: token(1, { raw: true }), + typography: token(1, { raw: true }), +}; + const layout = { - space: { - xxs: token(2), - xs: token(4), - sm: token(6), - md: token(12), - lg: token(24), - xl: token(48), - xxl: token(96), - }, grid: { - cols: token(12, { static: true }), + cols: token(12, { raw: true }), }, width: { - xs: token('576px', { static: true }), - sm: token('768px', { static: true }), - md: token('992px', { static: true }), - lg: token('1200px', { static: true }), - xl: token('1440px', { static: true }), + xs: token('576px', { raw: true, static: true }), + sm: token('768px', { raw: true, static: true }), + md: token('992px', { raw: true, static: true }), + lg: token('1200px', { raw: true, static: true }), + xl: token('1440px', { raw: true, static: true }), + }, + space: { + xxxs: token(2, { scale: internal.scale1 }), + xxs: token(4, { scale: internal.scale1 }), + xs: token(8, { scale: internal.scale1 }), + sm: token(12, { scale: internal.scale1 }), + md: token(16, { scale: internal.scale1 }), + lg: token(24, { scale: internal.scale1 }), + xl: token(32, { scale: internal.scale1 }), + xxl: token(48, { scale: internal.scale1 }), + xxxl: token(64, { scale: internal.scale1 }), }, }; const space = { - 0: token(0), - 1: token(1), - 2: token(2), - 3: token(4), - 4: token(6), - 5: token(8), - 6: token(12), - 7: token(16), - 8: token(18), - 9: token(24), - 10: token(32), - 11: token(36), - 12: token(48), - 13: token(72), + 0: token(0, { scale: internal.scale2 }), + 1: token(1, { scale: internal.scale2 }), + 2: token(2, { scale: internal.scale2 }), + 3: token(4, { scale: internal.scale2 }), + 4: token(6, { scale: internal.scale2 }), + 5: token(8, { scale: internal.scale2 }), + 6: token(12, { scale: internal.scale2 }), + 7: token(16, { scale: internal.scale2 }), + 8: token(18, { scale: internal.scale2 }), + 9: token(24, { scale: internal.scale2 }), + 10: token(32, { scale: internal.scale2 }), + 11: token(36, { scale: internal.scale2 }), + 12: token(48, { scale: internal.scale2 }), + 13: token(64, { scale: internal.scale2 }), + 14: token(72, { scale: internal.scale2 }), + 15: token(96, { scale: internal.scale2 }), }; const color = { @@ -342,19 +361,17 @@ const typography = { extrabold: token('600'), }, fontSize: { - 0: token(10), - 1: token(11), - 2: token(12), - 3: token(13), - 4: token(14), - 5: token(16), - 6: token(20), - 7: token(24), - 8: token(32), - 9: token(40), - }, - baseFontSize: token('125%'), // deprecated for removal in 6.0 - baseFontSizePx: token(20), // deprecated for removal in 6.0 + 0: token(10, { scale: internal.scale3 }), + 1: token(11, { scale: internal.scale3 }), + 2: token(12, { scale: internal.scale3 }), + 3: token(13, { scale: internal.scale3 }), + 4: token(14, { scale: internal.scale3 }), + 5: token(16, { scale: internal.scale3 }), + 6: token(20, { scale: internal.scale3 }), + 7: token(24, { scale: internal.scale3 }), + 8: token(32, { scale: internal.scale3 }), + 9: token(40, { scale: internal.scale3 }), + }, fontFamily: token("'Clarity City', 'Avenir Next', sans-serif"), headerFontFamily: token("'Clarity City', 'Avenir Next', sans-serif"), monospaceFontFamily: token('ui-monospace, Consolas, Menlo, Monaco, monospace'), @@ -372,61 +389,61 @@ const typography = { }, }, body: { - fontSize: token(14), + fontSize: token(14, { scale: internal.scale3 }), lineHeight: token('1.42857em', { static: true }), // static for line height eraser calcs letterSpacing: token('-0.014286em'), fontWeight: token('400'), }, display: { - fontSize: token(40), + fontSize: token(40, { scale: internal.scale3 }), lineHeight: token('1.1em', { static: true }), letterSpacing: token('-0.0125em'), fontWeight: token('400'), }, heading: { - fontSize: token(32), + fontSize: token(32, { scale: internal.scale3 }), lineHeight: token('1.125em', { static: true }), letterSpacing: token('-0.0125em'), fontWeight: token('400'), }, title: { - fontSize: token(24), + fontSize: token(24, { scale: internal.scale3 }), lineHeight: token('1.16667em', { static: true }), letterSpacing: token('-0.008333em'), fontWeight: token('400'), }, section: { - fontSize: token(20), + fontSize: token(20, { scale: internal.scale3 }), lineHeight: token('1.2em', { static: true }), letterSpacing: token('-0.01em'), fontWeight: token('400'), }, subsection: { - fontSize: token(16), + fontSize: token(16, { scale: internal.scale3 }), lineHeight: token('1.25em', { static: true }), letterSpacing: token('-0.0125em'), fontWeight: token('400'), }, message: { - fontSize: token(16), + fontSize: token(16, { scale: internal.scale3 }), lineHeight: token('1.25em', { static: true }), letterSpacing: token('-0.0125em'), fontWeight: token(400), }, secondary: { - fontSize: token(13), + fontSize: token(13, { scale: internal.scale3 }), lineHeight: token('1.23077em', { static: true }), letterSpacing: token('-0.007692em'), fontWeight: token('400'), }, caption: { - fontSize: token(11), + fontSize: token(11, { scale: internal.scale3 }), lineHeight: token('1.454545em', { static: true }), letterSpacing: token('0.018182em'), fontWeight: token('400'), }, smallcaption: { - fontSize: token(10), + fontSize: token(10, { scale: internal.scale3 }), lineHeight: token('1.2em', { static: true }), letterSpacing: token('0.05em'), fontWeight: token('500'), @@ -569,6 +586,7 @@ const aliases = { }; export const baseTheme: CdsTheme = { - global: { layout, space, color, typography, animation, base: token(20, { static: true }) }, + global: { base, scale, layout, space, color, typography, animation }, aliases, + internal, }; diff --git a/packages/core/docs/welcome.stories.ts b/packages/core/docs/welcome.stories.ts index e872be2e3..3fa1988f2 100644 --- a/packages/core/docs/welcome.stories.ts +++ b/packages/core/docs/welcome.stories.ts @@ -16,12 +16,12 @@ export default { export const core = () => { return html` -
+
Clarity Core

Clarity Core diff --git a/packages/core/package.json b/packages/core/package.json index d45dec1b6..b01ca7a1e 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -89,7 +89,7 @@ "bundlesize": "1.0.0-beta.2", "cem-plugin-readonly": "0.0.2", "cem-plugin-module-file-extensions": "0.0.2", - "csso": "4.2.0", + "csso": "5.0.0", "custom-elements-hmr-polyfill": "1.0.3", "del-cli": "1.1.0", "eslint": "8.3.0", @@ -105,7 +105,7 @@ "npm-run-all": "4.1.5", "patch-package": "6.4.7", "playwright": "1.11.1", - "purgecss": "4.0.3", + "purgecss": "4.1.3", "replace": "1.2.0", "rollup-plugin-copy": "3.4.0", "rollup-plugin-delete": "2.0.0", @@ -115,7 +115,7 @@ "rollup-plugin-styles": "3.14.1", "rollup-plugin-sourcemaps": "0.6.3", "rollup-plugin-terser": "7.0.2", - "sass": "1.26.10", + "sass": "1.44.0", "source-map-explorer": "2.5.2", "stylelint": "10.0.1", "stylelint-config-recommended": "2.2.0", diff --git a/packages/core/rollup.utils.js b/packages/core/rollup.utils.js index 87c5c2baf..6b3c35d9c 100644 --- a/packages/core/rollup.utils.js +++ b/packages/core/rollup.utils.js @@ -69,7 +69,9 @@ export const litSass = () => { } return { - code: `import { css } from 'lit';export default css\`${prod ? csso.minify(css).css : css}\``, + code: `import { css } from 'lit';export default css\`${ + prod ? csso.minify(css, { comments: false }).css : css + }\``, map: { mappings: '' }, }; } else { @@ -96,12 +98,12 @@ export const globalStyles = config => { file: resolve(output).replace(resolve(config.baseDir), resolve(config.outDir)).replace(extname(output), '.css'), }, plugins: [ - styles({ mode: 'extract', plugins: [autoprefixer] }), + styles({ mode: 'extract', plugins: [autoprefixer({ flexbox: false })] }), { writeBundle(outputOptions, bundle) { const css = Object.entries(bundle)[1][1].source; fs.writeFileSync(outputOptions.file, css); - fs.writeFileSync(outputOptions.file.replace('.css', '.min.css'), csso.minify(css).css); + fs.writeFileSync(outputOptions.file.replace('.css', '.min.css'), csso.minify(css, { comments: false }).css); }, buildStart() { this.addWatchFile(input); diff --git a/packages/core/src/accordion/accordion-header.element.ts b/packages/core/src/accordion/accordion-header.element.ts index f1312f111..3162fe837 100644 --- a/packages/core/src/accordion/accordion-header.element.ts +++ b/packages/core/src/accordion/accordion-header.element.ts @@ -54,7 +54,7 @@ export class CdsAccordionHeader extends LitElement { } render() { - return html`
+ return html`
`; diff --git a/packages/core/src/accordion/accordion-panel.element.ts b/packages/core/src/accordion/accordion-panel.element.ts index 8e6d258e9..8618135ec 100644 --- a/packages/core/src/accordion/accordion-panel.element.ts +++ b/packages/core/src/accordion/accordion-panel.element.ts @@ -91,7 +91,7 @@ export class CdsAccordionPanel extends LitElement { return html`

-
+
Message: Can you imagine what we will be downloading in another twenty years? Who would have ever thought that you could record sound with digital quality fifty years ago? Now we routinely download whole albums worth of music in a couple of minutes. @@ -86,7 +86,7 @@ export function WithContainerOfCards() { -
+
@@ -95,7 +95,7 @@ export function WithContainerOfCards() { Card Title -
+
Message: Can you imagine what we will be downloading in another twenty years? Who would have ever thought that you could record sound with digital quality fifty years ago? Now we routinely download whole albums worth of music in a couple of minutes. @@ -103,7 +103,7 @@ export function WithContainerOfCards() { -
+
@@ -112,7 +112,7 @@ export function WithContainerOfCards() { Card Title -
+
Message: Can you imagine what we will be downloading in another twenty years? Who would have ever thought that you could record sound with digital quality fifty years ago? Now we routinely download whole albums worth of music in a couple of minutes. @@ -120,7 +120,7 @@ export function WithContainerOfCards() { -
+
@@ -136,15 +136,13 @@ export function WithAlert() { Card Title
-
- - This is an alert with a status of "info" - -
+ + This is an alert with a status of "info" + -
+
`; @@ -158,7 +156,7 @@ export function WithForms() { Card Title -
+
@@ -188,15 +186,13 @@ export function WithForms() { a email address is required to continue please enter a valid email address - - save
-
+
Submit
@@ -211,11 +207,11 @@ export function WithLayoutAndTwoDividers(args: { [key: string]: unknown }) { ...="${spreadProps(getElementStorybookArgs(args))}" >
-

Card Title

+

Card Title

-
+
Message: Can you imagine what we will be downloading in another twenty years? Who would have ever thought that you could record sound with digital quality fifty years ago? Now we routinely download whole albums worth of music in a couple of minutes. @@ -223,7 +219,7 @@ export function WithLayoutAndTwoDividers(args: { [key: string]: unknown }) { -
+
`; } @@ -235,11 +231,11 @@ export function WithLayoutTwoDividersAndButton(args: { [key: string]: unknown }) ...="${spreadProps(getElementStorybookArgs(args))}" >
-

Card Title

+

Card Title

-
+
Message: Can you imagine what we will be downloading in another twenty years? Who would have ever thought that you could record sound with digital quality fifty years ago? Now we routinely download whole albums worth of music in a couple of minutes. @@ -247,7 +243,7 @@ export function WithLayoutTwoDividersAndButton(args: { [key: string]: unknown }) -
+
View
@@ -257,17 +253,17 @@ export function WithLayoutTwoDividersAndButton(args: { [key: string]: unknown }) export function WithImage() { return html`
-

Card Title

+

Card Title

-
+
placeholder image
-
+
View
@@ -278,13 +274,13 @@ export function WithImage() { export function WithLists() { return html`
-

+

Card with list

-
+
  • The five boxing wizards jump quickly
  • The five boxing wizards jump quickly
    • @@ -298,7 +294,7 @@ export function WithLists() { -
    +
    Action
    @@ -321,9 +317,9 @@ export function SocialPost() { return html`
    -

    +

    @@ -334,13 +330,13 @@ export function SocialPost() { -
    +
    If you can carry it to the top of the mountain you may find what you were looking for in the first place.
    -
    +
    Like Share
    @@ -351,11 +347,11 @@ export function SocialPost() { export function WithLayoutAndOverflow() { return html`
    -

    Card Title

    +

    Card Title

    -
    +
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat tortor eget quam auctor, quis sagittis libero auctor. Nulla augue ante, tincidunt sit amet semper vitae, tempus at ipsum. Vestibulum elementum, turpis quis ullamcorper fermentum, elit turpis placerat ipsum, quis convallis ex nisi sit amet lacus. @@ -376,7 +372,7 @@ export function WithLayoutAndOverflow() { -
    +
    View View View Success diff --git a/packages/core/src/file/file.element.scss b/packages/core/src/file/file.element.scss index 43c09af14..4b308b499 100644 --- a/packages/core/src/file/file.element.scss +++ b/packages/core/src/file/file.element.scss @@ -4,7 +4,7 @@ @import './../styles/tokens/generated/index'; -$fallback-width: calc(#{$cds-global-layout-space-xxl} * 2); +$fallback-width: calc(#{$cds-global-layout-space-xxxl} * 3); :host { --control-width: #{$fallback-width}; diff --git a/packages/core/src/forms/control-group/control-group.element.scss b/packages/core/src/forms/control-group/control-group.element.scss index 6f6860d5e..b2c328d8c 100644 --- a/packages/core/src/forms/control-group/control-group.element.scss +++ b/packages/core/src/forms/control-group/control-group.element.scss @@ -4,7 +4,7 @@ @import './../../styles/tokens/generated/index'; -$fallback-width: calc(#{$cds-global-layout-space-xxl} * 2); +$fallback-width: calc(#{$cds-global-layout-space-xxxl} * 3); :host { width: 100%; diff --git a/packages/core/src/forms/control-group/control-group.element.ts b/packages/core/src/forms/control-group/control-group.element.ts index d6d8b10b7..8e0caa0da 100644 --- a/packages/core/src/forms/control-group/control-group.element.ts +++ b/packages/core/src/forms/control-group/control-group.element.ts @@ -120,7 +120,7 @@ export class CdsInternalControlGroup extends LitElement { protected get messagesTemplate() { return html`
    ${!this.isInlineControlGroup ? getStatusIcon(this.status) : ''} @@ -133,7 +133,7 @@ export class CdsInternalControlGroup extends LitElement { protected get controlsTemplate() { return this.isInlineControlGroup ? html` -
    +
    @@ -150,17 +150,17 @@ export class CdsInternalControlGroup extends LitElement { } private get inlineControlLayout(): string { - return `${!this.layout.includes('inline') && this.layout !== 'compact' ? 'vertical gap:sm' : 'horizontal gap:md'} ${ + return `${!this.layout.includes('inline') && this.layout !== 'compact' ? 'vertical gap:xs' : 'horizontal gap:sm'} ${ !this.layout.includes('vertical') ? 'wrap:none' : '' }`; } private get primaryLabelLayout() { - return !this.layout.includes('vertical') ? 'horizontal gap:lg' : 'vertical gap:sm'; + return !this.layout.includes('vertical') ? 'horizontal gap:lg' : 'vertical gap:xs'; } private get controlMessageLayout() { - return `${this.layout === 'compact' ? 'horizontal' : 'vertical'} gap:sm wrap:none align:stretch`; + return `${this.layout === 'compact' ? 'horizontal' : 'vertical'} gap:xs wrap:none align:stretch`; } render() { diff --git a/packages/core/src/forms/control-inline/control-inline.element.ts b/packages/core/src/forms/control-inline/control-inline.element.ts index 5bc5519a5..9a560c2ba 100644 --- a/packages/core/src/forms/control-inline/control-inline.element.ts +++ b/packages/core/src/forms/control-inline/control-inline.element.ts @@ -60,10 +60,10 @@ export class CdsInternalControlInline extends CdsControl { return html`
    @@ -72,7 +72,7 @@ export class CdsInternalControlInline extends CdsControl { ${this.internalLabelTemplate}
    ${this.messages?.length - ? html`
    + ? html`
    ${getStatusIcon(this.status)}
    diff --git a/packages/core/src/forms/control-label/control-label.element.scss b/packages/core/src/forms/control-label/control-label.element.scss index 8333e1d7f..cb0670cc8 100644 --- a/packages/core/src/forms/control-label/control-label.element.scss +++ b/packages/core/src/forms/control-label/control-label.element.scss @@ -14,7 +14,7 @@ :host([action='primary']) { min-width: var(--label-width, var(--internal-label-min-width)); - max-width: var(--label-width, var(--internal-label-max-width, calc(#{$cds-global-layout-space-xxl} * 2))); + max-width: var(--label-width, var(--internal-label-max-width, calc(#{$cds-global-layout-space-xxxl} * 3))); } ::slotted([slot='label']) { diff --git a/packages/core/src/forms/control-label/control-label.element.ts b/packages/core/src/forms/control-label/control-label.element.ts index 836ed36c6..dfe6cf79f 100644 --- a/packages/core/src/forms/control-label/control-label.element.ts +++ b/packages/core/src/forms/control-label/control-label.element.ts @@ -36,7 +36,7 @@ export class CdsInternalControlLabel extends LitElement { render() { return html` -
    +
    `; diff --git a/packages/core/src/forms/control-message/control-message.element.scss b/packages/core/src/forms/control-message/control-message.element.scss index f3fc5db12..931aec257 100644 --- a/packages/core/src/forms/control-message/control-message.element.scss +++ b/packages/core/src/forms/control-message/control-message.element.scss @@ -6,10 +6,10 @@ @import './../../styles/mixins/mixins'; :host { - --color: #{$cds-global-typography-color-200}; + --color: #{$cds-global-typography-color-300}; --font-size: #{$cds-global-typography-font-size-1}; --font-weight: #{$cds-global-typography-font-weight-regular}; - --min-width: #{$cds-global-layout-space-xxl}; + --min-width: #{$cds-global-layout-space-xxxl}; --max-width: initial; min-width: var(--min-width); max-width: var(--max-width); diff --git a/packages/core/src/forms/control/control.element.scss b/packages/core/src/forms/control/control.element.scss index 2a07d39ef..742468243 100644 --- a/packages/core/src/forms/control/control.element.scss +++ b/packages/core/src/forms/control/control.element.scss @@ -4,7 +4,7 @@ @import './../../styles/tokens/generated/index'; -$fallback-width: calc(#{$cds-global-layout-space-xxl} * 2); +$fallback-width: calc(#{$cds-global-layout-space-xxxl} * 3); :host { contain: inherit; diff --git a/packages/core/src/forms/control/control.element.ts b/packages/core/src/forms/control/control.element.ts index 4bcf6e64f..a95878d36 100644 --- a/packages/core/src/forms/control/control.element.ts +++ b/packages/core/src/forms/control/control.element.ts @@ -181,7 +181,7 @@ export class CdsControl extends LitElement { >` : ''}
    ${this.primaryLabelTemplate} @@ -191,9 +191,9 @@ export class CdsControl extends LitElement { wrap:none ${this.layout === 'compact' ? 'horizontal' : 'vertical'} ${this.controlWidth === 'stretch' && !this.fixedControlWidth ? 'align:horizontal-stretch' : ''} - ${this.messages?.length ? 'gap:sm' : ''}" + ${this.messages?.length ? 'gap:xs' : ''}" > -
    +
    -
    +
    ${this.prefixDefaultTemplate}
    @@ -269,7 +269,7 @@ export class CdsControl extends LitElement { private get suffixTemplate() { return html`
    -
    +
    ${this.suffixDefaultTemplate}
    diff --git a/packages/core/src/forms/form-group/form-group.element.spec.ts b/packages/core/src/forms/form-group/form-group.element.spec.ts index 8a67f32f1..b5c48d666 100644 --- a/packages/core/src/forms/form-group/form-group.element.spec.ts +++ b/packages/core/src/forms/form-group/form-group.element.spec.ts @@ -132,7 +132,7 @@ describe('cds-form-group', () => { formGroup.layout = 'compact'; await componentIsStable(formGroup); - expect(formGroup.shadowRoot.innerHTML).toContain('vertical gap:md'); + expect(formGroup.shadowRoot.innerHTML).toContain('vertical gap:sm'); }); it('should determine label width when visible', async () => { diff --git a/packages/core/src/forms/form-group/form-group.element.ts b/packages/core/src/forms/form-group/form-group.element.ts index 540b0c3d7..e428368f6 100644 --- a/packages/core/src/forms/form-group/form-group.element.ts +++ b/packages/core/src/forms/form-group/form-group.element.ts @@ -89,7 +89,7 @@ export class CdsFormGroup extends LitElement { render() { return html` -
    +
    `; diff --git a/packages/core/src/index.performance.ts b/packages/core/src/index.performance.ts index f28b630ba..302b0b8c4 100644 --- a/packages/core/src/index.performance.ts +++ b/packages/core/src/index.performance.ts @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved. + * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. * This software is released under MIT license. * The full license information can be found in LICENSE in the root directory of this project. */ @@ -8,14 +8,14 @@ import { testBundleSize } from 'web-test-runner-performance/browser.js'; describe('performance', () => { it(`should meet maximum individual css bundle size limits`, async () => { - expect((await testBundleSize('@cds/core/global.min.css')).kb).toBeLessThan(8.2); + expect((await testBundleSize('@cds/core/global.min.css')).kb).toBeLessThan(8.5); expect((await testBundleSize('@cds/core/styles/theme.dark.min.css')).kb).toBeLessThan(0.5); expect((await testBundleSize('@cds/core/list/list.min.css')).kb).toBeLessThan(0.5); // contained in @cds/core/global.min.css - expect((await testBundleSize('@cds/core/styles/module.layout.min.css')).kb).toBeLessThan(4.3); + expect((await testBundleSize('@cds/core/styles/module.layout.min.css')).kb).toBeLessThan(4.5); expect((await testBundleSize('@cds/core/styles/module.reset.min.css')).kb).toBeLessThan(0.5); - expect((await testBundleSize('@cds/core/styles/module.tokens.min.css')).kb).toBeLessThan(2.6); + expect((await testBundleSize('@cds/core/styles/module.tokens.min.css')).kb).toBeLessThan(2.5); expect((await testBundleSize('@cds/core/styles/module.typography.min.css')).kb).toBeLessThan(1.6); }); diff --git a/packages/core/src/modal/modal-actions.element.spec.ts b/packages/core/src/modal/modal-actions.element.spec.ts index f88984d07..207b1af62 100644 --- a/packages/core/src/modal/modal-actions.element.spec.ts +++ b/packages/core/src/modal/modal-actions.element.spec.ts @@ -15,7 +15,7 @@ describe('modal-actions element', () => { let component: CdsModalActions; let componentWithLayout: CdsModalActions; const placeholderContent = 'Modal Placeholder'; - const defaultLayout = ['horizontal', 'gap:sm', 'align:right']; + const defaultLayout = ['horizontal', 'gap:xs', 'align:right']; beforeEach(async () => { testElement = await createTestElement(html`${placeholderContent}`); diff --git a/packages/core/src/modal/modal-actions.element.ts b/packages/core/src/modal/modal-actions.element.ts index b0255c964..644ddb7fd 100644 --- a/packages/core/src/modal/modal-actions.element.ts +++ b/packages/core/src/modal/modal-actions.element.ts @@ -39,7 +39,7 @@ export class CdsModalActions extends LitElement { render() { return this.hasAttribute('cds-layout') ? html`` - : html`
    `; + : html`
    `; } static get styles() { diff --git a/packages/core/src/modal/modal.element.scss b/packages/core/src/modal/modal.element.scss index dcd8e2fec..63fd6dcd2 100644 --- a/packages/core/src/modal/modal.element.scss +++ b/packages/core/src/modal/modal.element.scss @@ -7,22 +7,22 @@ --border-radius: #{$cds-alias-object-border-radius-100}; --background: #{$cds-alias-object-overlay-background}; --box-shadow: #{$cds-alias-object-shadow-100}; - --width: calc(8 * #{$cds-global-space-13}); + --width: calc(8 * #{$cds-global-space-14}); --content-overflow: hidden auto; --max-height: 70vh; --tablet-max-height: 55vh; } :host([size='sm']) { - --width: calc(4 * #{$cds-global-space-13}); + --width: calc(4 * #{$cds-global-space-14}); } :host([size='lg']) { - --width: calc(12 * #{$cds-global-space-13}); + --width: calc(12 * #{$cds-global-space-14}); } :host([size='xl']) { - --width: calc(16 * #{$cds-global-space-13}); + --width: calc(16 * #{$cds-global-space-14}); } :host([_demo-mode]) { diff --git a/packages/core/src/modal/modal.element.ts b/packages/core/src/modal/modal.element.ts index 003e5f7ce..bb967be9b 100644 --- a/packages/core/src/modal/modal.element.ts +++ b/packages/core/src/modal/modal.element.ts @@ -134,8 +134,8 @@ export class CdsModal extends CdsInternalOverlay { ${this.backdropTemplate}
    ${this.i18n.contentStart}
    -
    -
    +
    +
    diff --git a/packages/core/src/navigation/navigation-item.element.ts b/packages/core/src/navigation/navigation-item.element.ts index c8f3ab08b..1b4d3b290 100644 --- a/packages/core/src/navigation/navigation-item.element.ts +++ b/packages/core/src/navigation/navigation-item.element.ts @@ -98,7 +98,7 @@ export class CdsNavigationItem extends LitElement implements FocusableItem { return html`
    diff --git a/packages/core/src/navigation/navigation-start.element.ts b/packages/core/src/navigation/navigation-start.element.ts index e0613f22c..1a4cbf3c6 100644 --- a/packages/core/src/navigation/navigation-start.element.ts +++ b/packages/core/src/navigation/navigation-start.element.ts @@ -158,7 +158,7 @@ export class CdsNavigationStart extends LitElement implements FocusableItem { private renderGroupStart() { return html`