diff --git a/packages/web-components/assets/css/storybook-canvas.css b/packages/web-components/assets/css/storybook-canvas.css index 3a737221..a0f3a9b3 100644 --- a/packages/web-components/assets/css/storybook-canvas.css +++ b/packages/web-components/assets/css/storybook-canvas.css @@ -7,4 +7,31 @@ body:has(cbp-app[data-cbp-theme="light"]) { body:has(cbp-app[data-cbp-theme="dark"]) { /*--cbp-color-body-background: var(--cbp-color-branding-cbp-dark);*/ background-color: var(--cbp-color-branding-cbp-dark); -} \ No newline at end of file +} + +/* TechDebt: Remove when table component is added to design tokens story */ +#design-tokens h2 { + margin-block-end: 1rem; +} + +#design-tokens table { + width: 100%; + border-collapse: collapse; + border: solid 1px #999; + margin-block-end: 2rem; +} + +#design-tokens tr { + border-block-end: solid 1px #999; +} + + +#design-tokens th, +#design-tokens td { + text-align: left; + width: 33.3%; + padding: .5rem; + margin: 0; + border: 0; + border-block-end: solid 1px #999; +} diff --git a/packages/web-components/src/components/cbp-app/core.scss b/packages/web-components/src/components/cbp-app/core.scss index aabbe925..8c8da274 100644 --- a/packages/web-components/src/components/cbp-app/core.scss +++ b/packages/web-components/src/components/cbp-app/core.scss @@ -1,7 +1,7 @@ /* Additional high level and utilities variables not represented by design tokens */ :root { color-scheme: light; - interpolate-size: allow-keywords; + //interpolate-size: allow-keywords; --cbp-app-color-scheme: light; // Is this needed? --cbp-color-body-text: var(--cbp-color-text-darkest); diff --git a/packages/web-components/src/stories/Design-tokens.stories.tsx b/packages/web-components/src/stories/Design-tokens.stories.tsx index 57bd3f72..3965bc6e 100644 --- a/packages/web-components/src/stories/Design-tokens.stories.tsx +++ b/packages/web-components/src/stories/Design-tokens.stories.tsx @@ -173,14 +173,13 @@ const Template = () => {
${outputTableRow(contents)} - -