Skip to content

Commit

Permalink
generate color values based on properties file
Browse files Browse the repository at this point in the history
  • Loading branch information
@snorrekim
snorrekim committed Apr 5, 2024
1 parent fbce738 commit 42d4f36
Show file tree
Hide file tree
Showing 8 changed files with 494 additions and 77 deletions.
471 changes: 471 additions & 0 deletions packages/dnb-design-system-portal/src/docs/quickguide-designer/colors/ColorTable.tsx
View file

Large diffs are not rendered by default.

9 changes: 3 additions & 6 deletions .../dnb-design-system-portal/src/docs/quickguide-designer/colors/table-eiendom.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import { ColorTable } from './ColorTable'

## DNB Eiendom Colors

| Sample | Type | Brand name | Hex | RGB | Figma Library name | CSS Custom Properties name |
| ------- | ------- | ----------------- | --------- | ----------- | ------------------ | -------------------------- |
| #89AAAC | Eiendom | Emerald green 50% | `#00343E` | 137 170 172 | Emerald green 50% | `--color-emerald-green-50` |
| #C4D4D6 | Eiendom | Emerald green 25% | `#C4D4D6` | 196 212 214 | Emerald green 25% | `--color-emerald-green-25` |
| #E8EEEF | Eiendom | Emerald green 10% | `#E8EEEF` | 232 238 239 | Emerald green 10% | `--color-emerald-green-10` |
| #F4FBF9 | Eiendom | Mint green 12% | `#F4FBF9` | 244 251 249 | Mint green 12% | `--color-mint-green-12` |
<ColorTable theme="eiendom" />
33 changes: 3 additions & 30 deletions .../dnb-design-system-portal/src/docs/quickguide-designer/colors/table-sbanken.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,5 @@
import { ColorTable } from './ColorTable'

## Sbanken Colors

| Sample | Type | Brand name | Hex | RGB | Figma Library name | CSS Custom Properties name |
| ------- | ------- | ------------------- | --------- | ----------- | -------------------------- | -------------------------------- |
| #1C1B4E | Profile | Purple | `#1C1B4E` | 18 17 78 | Primary/Purple | `--sb-color-purple` |
| #222163 | Profile | Purple alternative | `#222163` | 34 33 99 | Primary/Purple alternative | `--sb-color-purple-alternative` |
| #92EECD | Profile | Green | `#92EECD` | 146 238 205 | Primary/Green | `--sb-color-green` |
| #D8134B | Profile | Red | `#D8134B` | 216 19 75 | Secondary/Red | `--sb-color-red` |
| #FF3C64 | Profile | Magenta | `#FF3C64` | 255 60 100 | Secondary/Magenta | `--sb-color-magenta` |
| #FE5038 | Profile | Orange | `#FE5030` | 254 80 56 | Secondary/Orange | `--sb-color-orange` |
| #F7BF16 | Profile | Yellow dark | `#F7BF16` | 247 191 22 | Secondary/Yellow dark | `--sb-color-yellow-dark` |
| #FFEF57 | Profile | Yellow | `#FFEF57` | 255 239 87 | Secondary/Yellow | `--sb-color-yellow` |
| #00785B | Profile | Green dark 3 | `#00785B` | 0 120 91 | Secondary/Green dark 3 | `--sb-color-green-dark-3` |
| #009669 | Profile | Green dark 2 | `#009669` | 0 150 105 | Secondary/Green dark 2 | `--sb-color-green-dark-2` |
| #4E08BC | Profile | Violet | `#4E08BC` | 78 8 188 | Secondary/Violet | `--sb-color-violet` |
| #7129E2 | Profile | Violet light | `#7129E2` | 113 41 226 | Secondary/Violet light | `--sb-color-violet-light` |
| #044CCC | Profile | Blue dark 2 | `#044CCC` | 4 76 204 | Secondary/Blue dark 2 | `--sb-color-blue-dark-2` |
| #005CFF | Profile | Blue dark | `#005CFF` | 0 92 255 | Secondary/Blue dark | `--sb-color-blue-dark` |
| #008EFF | Profile | Blue | `#008EFF` | 0 142 255 | Secondary/Blue | `--sb-color-blue` |
| #000000 | UX | Black | `#000000` | 0 0 0 | UX/Black | `--sb-color-black` |
| #18172A | UX | Text | `#18172A` | 24 23 42 | UX/Text | `--sb-color-text` |
| #3A3970 | UX | Gray dark 3 | `#3A3970` | 58 57 112 | UX/Gray dark 3 | `--sb-color-gray-dark-3` |
| #62628E | UX | Gray dark 2 | `#62628E` | 98 98 142 | UX/Gray dark 2 | `--sb-color-gray-dark-2` |
| #9292B0 | UX | Gray dark | `#9292B0` | 146 146 176 | UX/Gray dark | `--sb-color-gray-dark` |
| #BBBBCE | UX | Gray | `#BBBBCE` | 187 187 206 | UX/Gray | `--sb-color-gray` |
| #D9D9E4 | UX | Gray light | `#D9D9E4` | 217 217 228 | UX/Gray light | `--sb-color-gray-light` |
| #EBEBF2 | UX | Gray light | `#EBEBF2` | 235 235 242 | UX/Gray light 2 | `--sb-color-gray-light-2` |
| #F9F9FD | UX | Gray light 3 | `#F9F9FD` | 249 249 253 | UX/Gray light 3 | `--sb-color-gray-light-3` |
| #3E3E4A | UX | Gray dark 3 neutral | `#3E3E4A` | 62 62 74 | UX/Gray dark 3 neutral | `--sb-color-gray-dark-3-neutral` |
| #656472 | UX | Gray dark 2 neutral | `#656472` | 101 100 114 | UX/Gray dark 2 neutral | `--sb-color-gray-dark-2-neutral` |
| #9494A3 | UX | Gray dark neutral | `#9494A3` | 148 148 163 | UX/Dark gray neutral | `--sb-color-gray-dark-neutral` |
| #BDBDC6 | UX | Gray neutral | `#BDBDC6` | 189 189 198 | UX/Gray neutral | `--sb-color-gray-neutral` |
<ColorTable theme="sbanken" />
33 changes: 3 additions & 30 deletions packages/dnb-design-system-portal/src/docs/quickguide-designer/colors/table-ui.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,5 @@
import { ColorTable } from './ColorTable'

## DNB Colors

| Sample | Type | Brand name | Hex | RGB | Figma Library name | CSS Custom Properties name |
| ------- | ------- | ----------------- | --------- | ----------- | ------------------ | -------------------------- |
| #00343E | Profile | Ocean green | `#00343E` | 0 52 62 | Ocean green | `--color-ocean-green` |
| #14555A | Profile | Emerald green | `#14555A` | 20 85 90 | Emerald green | `--color-emerald-green` |
| #007272 | Profile | Sea green | `#007272` | 0 114 114 | Sea green | `--color-sea-green` |
| #A5E1D2 | Profile | Mint green | `#A5E1D2` | 165 225 210 | Mint green | `--color-mint-green` |
| #28B482 | Profile | Summer green | `#28B482` | 40 180 130 | Summer green | `--color-summer-green` |
| #FDBB31 | Profile | Accent yellow | `#FDBB31` | 253 187 49 | Accent yellow | `--color-accent-yellow` |
| #23195A | Profile | Indigo | `#23195A` | 35 25 90 | Indigo | `--color-indigo` |
| #6E2382 | Profile | Violet | `#6E2382` | 110 35 130 | Violet | `--color-violet` |
| #4BBED2 | Profile | Sky blue | `#4BBED2` | 75 190 210 | Sky blue | `--color-sky-blue` |
| #F2F2F5 | Profile | Lavender | `#F2F2F5` | 242 242 245 | Lavender | `--color-lavender` |
| #FBF6EC | Profile | Sand yellow | `#FBF6EC` | 251 246 236 | Sand yellow | `--color-sand-yellow` |
| #F2F4EC | Profile | Pistachio | `#F2F4EC` | 242 244 236 | Pistachio | `--color-pistachio` |
| #B3D5D5 | UX | Sea green 30% | `#B3D5D5` | 179 213 213 | Sea green 30% | `--color-sea-green-30` |
| #D2F0E9 | UX | Mint green 50% | `#D2F0E9` | 210 240 233 | Mint green 50% | `--color-mint-green-50` |
| #E9F8F4 | UX | Mint green 25% | `#E9F8F4` | 233 248 244 | Mint green 25% | `--color-mint-green-25` |
| #F4FBF9 | UX | Mint green 12% | `#F4FBF9` | 244 251 249 | Mint green 12% | `--color-mint-green-12` |
| #FEEBC1 | UX | Accent yellow 30% | `#FEEBC1` | 254 235 193 | Accent yellow 30% | `--color-accent-yellow-30` |
| #FF5400 | UX | Signal orange | `#FF5400` | 255 84 0 | Signal orange | `--color-signal-orange` |
| #DC2A2A | UX | Fire red | `#DC2A2A` | 220 42 42 | Fire red | `--color-fire-red` |
| #FDEEEE | UX | Fire red 8% | `#FDEEEE` | 253 238 238 | Fire red 8% | `--color-fire-red-8` |
| #007B5E | UX | Success green | `#007B5E` | 0 128 0 | Success green | `--color-success-green` |
| #000000 | UX | Black | `#000000` | 0 0 0 | Black | `--color-black` |
| #333333 | UX | Black 80% | `#333333` | 51 51 51 | Black 80% | `--color-black-80` |
| #737373 | UX | Black 55% | `#737373` | 115 115 115 | Black 55% | `--color-black-55` |
| #CCCCCC | UX | Black 20% | `#CCCCCC` | 204 204 204 | Black 20% | `--color-black-20` |
| #EBEBEB | UX | Black 8% | `#EBEBEB` | 235 235 235 | Black 8% | `--color-black-8` |
| #F8F8F8 | UX | Black 3% | `#F8F8F8` | 248 248 248 | Black 3% | `--color-black-3` |
| #FFFFFF | UX | White | `#FFFFFF` | 255 255 255 | White | `--color-white` |
<ColorTable theme="ui" />
25 changes: 14 additions & 11 deletions packages/dnb-design-system-portal/src/shared/tags/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@

import React from 'react'
import styled from '@emotion/styled'
import { Td } from '@dnb/eufemia/src'
import { Table as TableElement } from '@dnb/eufemia/src/components'

const StyledTable = styled(TableElement)`
Expand Down Expand Up @@ -53,16 +52,20 @@ export default function Table({ children }) {
}

if (child.type === 'td') {
const tds = getChildren(child)
const hex = String(tds?.[0])

// manipulate the colors, if provided
if (hex.startsWith('#') && hex.length === 7) {
return (
<Td aria-hidden style={prepareStyleWithSameColor(hex)}>
{hex}
</Td>
)
const tdChildren = getChildren(child)
if (tdChildren?.length === 1) {
const text = String(tdChildren?.[0])
if (
text.startsWith('#') &&
(text.length === 7 || text.length === 4)
) {
// manipulate the colors, if provided
return (
<td aria-hidden style={prepareStyleWithSameColor(text)}>
{text}
</td>
)
}
}
}

Expand Down
Binary file modified .../style/__tests__/__image_snapshots__/colors-eiendom-have-to-all-colors.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../style/__tests__/__image_snapshots__/colors-sbanken-have-to-all-colors.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...a/src/style/__tests__/__image_snapshots__/colors-ui-have-to-all-colors.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 42d4f36

Please sign in to comment.