Skip to content

Commit

Permalink
rm-namespace-from-js-files (#755)
Browse files Browse the repository at this point in the history
  • Loading branch information
lukasoppermann authored Sep 16, 2024
1 parent d061705 commit 1916153
Show file tree
Hide file tree
Showing 17 changed files with 668 additions and 702 deletions.
4 changes: 1 addition & 3 deletions packages/design-tokens/scripts/build-tokens.js
Original file line number Diff line number Diff line change
Expand Up @@ -276,15 +276,13 @@ const darkJson = require('../src/tokens/base/colors/dark')
for (const path of filesForColorModes) {
const sansExtension = path.replace(/\.[^/.]+$/, '')

const prefix = path.split('.').pop() === 'json' ? namespace : undefined

buildPrimitives({
include: [`tokens/functional/colors/global.json`],
source: [path], // build the special formats
namespace,
platforms: {
css: {
prefix, // we still need to remove namespace form all component files with .js
prefix: namespace,
buildPath: `${outputPath}/css/`,
transformGroup: 'css',
files: [
Expand Down
Original file line number Diff line number Diff line change
@@ -1,28 +1,26 @@
module.exports = {
brand: {
Accordion: {
toggle: {
color: {
start: {
value: 'var(--brand-color-accent-primary)',
dark: 'var(--brand-color-accent-primary)',
},
end: {
value: 'var(--brand-color-accent-primary)',
dark: 'var(--brand-color-accent-primary)',
},
Accordion: {
toggle: {
color: {
start: {
value: 'var(--brand-color-accent-primary)',
dark: 'var(--brand-color-accent-primary)',
},
end: {
value: 'var(--brand-color-accent-primary)',
dark: 'var(--brand-color-accent-primary)',
},
},
border: {
color: {
default: {
value: 'var(--brand-color-border-default)',
dark: 'var(--base-color-scale-gray-5)',
},
emphasis: {
value: 'var(--base-color-scale-black-0)',
dark: 'var(--base-color-scale-white-0)',
},
},
border: {
color: {
default: {
value: 'var(--brand-color-border-default)',
dark: 'var(--base-color-scale-gray-5)',
},
emphasis: {
value: 'var(--base-color-scale-black-0)',
dark: 'var(--base-color-scale-white-0)',
},
},
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
module.exports = {
brand: {
ActionMenu: {
color: {
item: {
hover: {
value: 'var(--base-color-scale-gray-1)',
dark: 'var(--base-color-scale-gray-6)',
},
ActionMenu: {
color: {
item: {
hover: {
value: 'var(--base-color-scale-gray-1)',
dark: 'var(--base-color-scale-gray-6)',
},
scrollbar: {
thumb: {
bg: {
value: 'var(--base-color-scale-gray-0)',
dark: 'var(--base-color-scale-gray-3)',
},
},
scrollbar: {
thumb: {
bg: {
value: 'var(--base-color-scale-gray-0)',
dark: 'var(--base-color-scale-gray-3)',
},
},
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
module.exports = {
brand: {
AnchorNav: {
link: {
underline: {
default: {
value: 'var(--base-color-scale-gray-4)',
dark: 'var(--base-color-scale-gray-3)',
},
pressed: {
value: 'var(--base-color-scale-black-0)',
dark: 'var(--base-color-scale-white-0)',
},
AnchorNav: {
link: {
underline: {
default: {
value: 'var(--base-color-scale-gray-4)',
dark: 'var(--base-color-scale-gray-3)',
},
pressed: {
value: 'var(--base-color-scale-black-0)',
dark: 'var(--base-color-scale-white-0)',
},
},
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
module.exports = {
brand: {
breadcrumbs: {
separator: {
borderColor: {
value: 'var(--base-color-scale-gray-6)',
dark: 'var(--base-color-scale-gray-1)',
},
breadcrumbs: {
separator: {
borderColor: {
value: 'var(--base-color-scale-gray-6)',
dark: 'var(--base-color-scale-gray-1)',
},
},
},
Expand Down
230 changes: 114 additions & 116 deletions packages/design-tokens/src/tokens/functional/components/button/colors.js
Original file line number Diff line number Diff line change
@@ -1,124 +1,122 @@
module.exports = {
brand: {
button: {
primary: {
bgColor: {
rest: {
value: 'var(--base-color-scale-black-0)',
dark: 'var(--base-color-scale-white-0)',
},
hover: {
value: 'var(--base-color-scale-gray-8)',
dark: 'var(--base-color-scale-gray-0)',
},
active: {
value: 'var(--base-color-scale-gray-8)',
dark: 'var(--base-color-scale-gray-0)',
},
disabled: {
value: 'var(--base-color-scale-gray-4)',
dark: 'var(--base-color-scale-gray-4)',
},
},
borderColor: {
rest: {
value: 'var(--base-color-scale-black-0)',
dark: 'var(--base-color-scale-white-0)',
},
hover: {
value: 'var(--base-color-scale-gray-8)',
dark: 'var(--base-color-scale-white-0)',
},
active: {
value: 'var(--base-color-scale-gray-8)',
dark: 'var(--base-color-scale-white-0)',
},
disabled: {
value: 'var(--base-color-scale-gray-4)',
dark: 'var(--base-color-scale-gray-4)',
},
},
fgColor: {
rest: {
value: 'var(--brand-color-text-onEmphasis)',
dark: 'var(--brand-color-text-onEmphasis)',
},
disabled: {
value: 'var(--base-color-scale-gray-2)',
dark: 'var(--base-color-scale-gray-2)',
},
},
shadow: {
active: {
value: 'inset 0px 1px 0px 0px var(--brand-button-primary-borderColor-active)',
dark: 'inset 0px 1px 0px 0px var(--brand-button-primary-borderColor-active)',
},
button: {
primary: {
bgColor: {
rest: {
value: 'var(--base-color-scale-black-0)',
dark: 'var(--base-color-scale-white-0)',
},
hover: {
value: 'var(--base-color-scale-gray-8)',
dark: 'var(--base-color-scale-gray-0)',
},
active: {
value: 'var(--base-color-scale-gray-8)',
dark: 'var(--base-color-scale-gray-0)',
},
disabled: {
value: 'var(--base-color-scale-gray-4)',
dark: 'var(--base-color-scale-gray-4)',
},
},
secondary: {
bgColor: {
rest: {
value: 'transparent',
dark: 'transparent',
},
hover: {
value: '#b7bfc833',
dark: '#8a939e33',
},
active: {
value: '#b7bfc866',
dark: '#8a939e66',
},
},
borderColor: {
rest: {
value: 'var(--brand-color-border-default)',
dark: 'var(--brand-color-border-default)',
},
hover: {
value: 'var(--base-color-scale-gray-9)',
dark: 'var(--base-color-scale-white-0)',
},
active: {
value: 'var(--base-color-scale-gray-9)',
dark: 'var(--base-color-scale-white-0)',
},
},
fgColor: {
rest: {
value: 'var(--brand-color-text-default)',
dark: 'var(--brand-color-text-default)',
},
disabled: {
value: 'var(--base-color-scale-gray-3)',
dark: 'var(--base-color-scale-gray-4)',
},
borderColor: {
rest: {
value: 'var(--base-color-scale-black-0)',
dark: 'var(--base-color-scale-white-0)',
},
hover: {
value: 'var(--base-color-scale-gray-8)',
dark: 'var(--base-color-scale-white-0)',
},
active: {
value: 'var(--base-color-scale-gray-8)',
dark: 'var(--base-color-scale-white-0)',
},
disabled: {
value: 'var(--base-color-scale-gray-4)',
dark: 'var(--base-color-scale-gray-4)',
},
},
subtle: {
borderColor: {
rest: {
value: 'transparent',
dark: 'transparent',
},
hover: {
value: 'var(--base-color-scale-gray-9)',
dark: 'var(--base-color-scale-white-0)',
},
active: {
value: 'var(--base-color-scale-gray-9)',
dark: 'var(--base-color-scale-white-0)',
},
},
fgColor: {
rest: {
value: 'var(--brand-color-text-default)',
dark: 'var(--brand-color-text-default)',
},
disabled: {
value: 'var(--base-color-scale-gray-3)',
dark: 'var(--base-color-scale-gray-4)',
},
fgColor: {
rest: {
value: 'var(--brand-color-text-onEmphasis)',
dark: 'var(--brand-color-text-onEmphasis)',
},
disabled: {
value: 'var(--base-color-scale-gray-2)',
dark: 'var(--base-color-scale-gray-2)',
},
},
shadow: {
active: {
value: 'inset 0px 1px 0px 0px var(--brand-button-primary-borderColor-active)',
dark: 'inset 0px 1px 0px 0px var(--brand-button-primary-borderColor-active)',
},
},
},
secondary: {
bgColor: {
rest: {
value: 'transparent',
dark: 'transparent',
},
hover: {
value: '#b7bfc833',
dark: '#8a939e33',
},
active: {
value: '#b7bfc866',
dark: '#8a939e66',
},
},
borderColor: {
rest: {
value: 'var(--brand-color-border-default)',
dark: 'var(--brand-color-border-default)',
},
hover: {
value: 'var(--base-color-scale-gray-9)',
dark: 'var(--base-color-scale-white-0)',
},
active: {
value: 'var(--base-color-scale-gray-9)',
dark: 'var(--base-color-scale-white-0)',
},
},
fgColor: {
rest: {
value: 'var(--brand-color-text-default)',
dark: 'var(--brand-color-text-default)',
},
disabled: {
value: 'var(--base-color-scale-gray-3)',
dark: 'var(--base-color-scale-gray-4)',
},
},
},
subtle: {
borderColor: {
rest: {
value: 'transparent',
dark: 'transparent',
},
hover: {
value: 'var(--base-color-scale-gray-9)',
dark: 'var(--base-color-scale-white-0)',
},
active: {
value: 'var(--base-color-scale-gray-9)',
dark: 'var(--base-color-scale-white-0)',
},
},
fgColor: {
rest: {
value: 'var(--brand-color-text-default)',
dark: 'var(--brand-color-text-default)',
},
disabled: {
value: 'var(--base-color-scale-gray-3)',
dark: 'var(--base-color-scale-gray-4)',
},
},
},
Expand Down
Loading

0 comments on commit 1916153

Please sign in to comment.