Skip to content

Commit

Permalink
add composite border token (#1118)
Browse files Browse the repository at this point in the history
* add composite border token

* add changeset

* change borderWith values to px

* added remaining borders and story

* github-actions[bot] Regenerated snapshots

---------

Co-authored-by: lukasoppermann <[email protected]>
  • Loading branch information
lukasoppermann and lukasoppermann authored Dec 11, 2024
1 parent d85b9be commit 1d7def1
Show file tree
Hide file tree
Showing 228 changed files with 330 additions and 20 deletions.
5 changes: 5 additions & 0 deletions .changeset/shaggy-mails-clean.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/primitives': minor
---

Adding composite tokens for borders
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 48 additions & 0 deletions docs/storybook/stories/Border/Border.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react'
// eslint-disable-next-line import/extensions
import ColorPreview from '../StorybookComponents/ColorPreview/ColorPreview'

export default {
title: 'Borders/Standard',
parameters: {
storyType: 'swatch',
controls: {hideNoControlsWarning: true},
tags: ['snapshotLight'],
},
}

const borders = ['border-default', 'border-muted', 'border-emphasis', 'border-disabled', 'border-transparent']

export const Standard = () => {
return (
<>
{borders.map(border => (
<ColorPreview key={border} color={border} border canvasColor="bgColor-default" />
))}
</>
)
}

const roleBorders = [
'accent',
'success',
'open',
'danger',
'closed',
'attention',
'severe',
'done',
'upsell',
'sponsors',
'neutral',
].flatMap(border => [`border-${border}-emphasis`, `border-${border}-muted`])

export const Roles = () => {
return (
<>
{roleBorders.map(border => (
<ColorPreview key={border} color={border} border canvasColor="bgColor-default" />
))}
</>
)
}
1 change: 0 additions & 1 deletion docs/storybook/stories/Size/Border.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react'
// eslint-disable-next-line import/extensions
import sizeTokens from '../../../../dist/docs/functional/size/border.json'
import {SizeTokenSwatch} from '../StorybookComponents/SizeTokenSwatch/SizeTokenSwatch'
import {DataTable, Table} from '@primer/react/drafts'
import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import './ColorPreview.css'
export type ColorPreviewProps = {
textColor?: boolean
borderColor?: boolean
border?: boolean
bgColor?: boolean
canvasColor?: string
color?: string
Expand All @@ -16,6 +17,7 @@ export type ColorPreviewProps = {

export function ColorPreview({
textColor,
border,
borderColor,
bgColor,
canvasColor,
Expand All @@ -34,6 +36,7 @@ export function ColorPreview({
</p>
)}
{borderColor && <div style={{borderColor: `var(--${color})`, ...style}} data-border></div>}
{border && <div style={{border: `var(--${color})`, ...style}} data-border></div>}
{bgColor && (
<div
style={{backgroundColor: `var(--${color})`, border: `solid 1px var(--${bgColorBorder})`, ...style}}
Expand Down
2 changes: 1 addition & 1 deletion scripts/buildTokens.ts
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
`src/tokens/functional/shadow/light.json5`,
`src/tokens/functional/border/*.json5`,
],
include: [`src/tokens/base/color/light/light.json5`],
include: [`src/tokens/base/color/light/light.json5`, 'src/tokens/functional/size/border.json5'],
},
// typography
{
Expand Down
39 changes: 33 additions & 6 deletions scripts/themes.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ export const themes: TokenBuildInput[] = [
`src/tokens/functional/border/*.json5`,
`src/tokens/functional/color/components/*.json5`,
],
include: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`],
include: [
`src/tokens/functional/size/border.json5`,
`src/tokens/base/color/light/light.json5`,
`src/tokens/base/color/light/display-light.json5`,
],
},
{
filename: 'light-tritanopia',
Expand All @@ -22,7 +26,11 @@ export const themes: TokenBuildInput[] = [
`src/tokens/functional/color/components/*.json5`,
`src/tokens/functional/color/light/overrides/light.tritanopia.json5`,
],
include: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`],
include: [
`src/tokens/functional/size/border.json5`,
`src/tokens/base/color/light/light.json5`,
`src/tokens/base/color/light/display-light.json5`,
],
},
{
filename: 'light-colorblind',
Expand All @@ -34,7 +42,11 @@ export const themes: TokenBuildInput[] = [
`src/tokens/functional/color/components/*.json5`,
`src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`,
],
include: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`],
include: [
`src/tokens/functional/size/border.json5`,
`src/tokens/base/color/light/light.json5`,
`src/tokens/base/color/light/display-light.json5`,
],
},
{
filename: 'light-high-contrast',
Expand All @@ -47,6 +59,7 @@ export const themes: TokenBuildInput[] = [
`src/tokens/functional/color/light/overrides/light.high-contrast.json5`,
],
include: [
`src/tokens/functional/size/border.json5`,
`src/tokens/base/color/light/light.json5`,
`src/tokens/base/color/light/light.high-contrast.json5`,
`src/tokens/base/color/light/display-light.json5`,
Expand All @@ -61,7 +74,11 @@ export const themes: TokenBuildInput[] = [
`src/tokens/functional/border/*.json5`,
`src/tokens/functional/color/components/*.json5`,
],
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
include: [
`src/tokens/functional/size/border.json5`,
`src/tokens/base/color/dark/dark.json5`,
`src/tokens/base/color/dark/display-dark.json5`,
],
},
{
filename: 'dark-dimmed',
Expand All @@ -74,6 +91,7 @@ export const themes: TokenBuildInput[] = [
`src/tokens/functional/color/components/*.json5`,
],
include: [
`src/tokens/functional/size/border.json5`,
`src/tokens/base/color/dark/dark.json5`,
`src/tokens/base/color/dark/dark.dimmed.json5`,
`src/tokens/base/color/dark/display-dark.json5`,
Expand All @@ -90,7 +108,11 @@ export const themes: TokenBuildInput[] = [
`src/tokens/functional/color/components/*.json5`,
`src/tokens/functional/color/dark/overrides/dark.tritanopia.json5`,
],
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
include: [
`src/tokens/functional/size/border.json5`,
`src/tokens/base/color/dark/dark.json5`,
`src/tokens/base/color/dark/display-dark.json5`,
],
},
{
filename: 'dark-colorblind',
Expand All @@ -102,7 +124,11 @@ export const themes: TokenBuildInput[] = [
`src/tokens/functional/color/components/*.json5`,
`src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`,
],
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
include: [
`src/tokens/functional/size/border.json5`,
`src/tokens/base/color/dark/dark.json5`,
`src/tokens/base/color/dark/display-dark.json5`,
],
},
{
filename: 'dark-high-contrast',
Expand All @@ -115,6 +141,7 @@ export const themes: TokenBuildInput[] = [
`src/tokens/functional/color/dark/overrides/dark.high-contrast.json5`,
],
include: [
`src/tokens/functional/size/border.json5`,
`src/tokens/base/color/dark/dark.json5`,
`src/tokens/base/color/dark/dark.high-contrast.json5`,
`src/tokens/base/color/dark/display-dark.json5`,
Expand Down
7 changes: 6 additions & 1 deletion src/primerStyleDictionary.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,12 @@ import {themeOverrides} from './preprocessors/themeOverrides.js'
* @formats [javascript/esm](https://github.com/primer/primitives/blob/main/config/formats/javascript-esm.ts), [javascript/commonJs](https://github.com/primer/primitives/blob/main/config/formats/javascript-commonJs.ts), [typescript/export-definition](https://github.com/primer/primitives/blob/main/config/formats/typescript-export-defition.ts)
* @transformers [color/rgbAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-rgb-alpha.ts), [color/hexAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex-alpha.ts), [color/hex](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex6.ts), [json/deprecated](https://github.com/primer/primitives/blob/main/config/tranformers/json-deprecated.ts), [name/pathToDotNotation](https://github.com/primer/primitives/blob/main/config/tranformers/name-path-to-dot-notation.ts)
*/
export const PrimerStyleDictionary: StyleDictionary = new StyleDictionary()
export const PrimerStyleDictionary: StyleDictionary = new StyleDictionary({
// these are the defaults
log: {
verbosity: 'default', // 'default' | 'silent' | 'verbose'
},
})

/**
* Formats
Expand Down
Loading

0 comments on commit 1d7def1

Please sign in to comment.