@channel.io/bezier-tokens 0.1.0-alpha.0

package/README.md

@@ -0,0 +1,44 @@
+# Bezier Tokens
+
+Bezier Tokens is a design tokens library that implements Bezier design system.
+
+## Installation
+
+```bash
+npm i -D @channel.io/bezier-tokens
+```
+
+## Usage
+
+### JavaScript
+
+You can access and use values by token group.
+
+```ts
+import { tokens } from '@channel.io/bezier-tokens'
+
+console.log(tokens.global['blue-300']) // "#..."
+console.log(tokens.lightTheme['bg-black-dark']) // "#..."
+```
+
+### CSS
+
+Provide all design tokens as CSS variables. If you want to apply dark theme tokens, add the `data-bezier-theme="dark"` attribute to the parent element. The default is light theme tokens, which can also be applied by adding the `data-bezier-theme="light"` attribute to the parent element.
+
+```ts
+import '@channel.io/bezier-tokens/css/global.css'
+import '@channel.io/bezier-tokens/css/light-theme.css'
+import '@channel.io/bezier-tokens/css/dark-theme.css'
+
+div {
+  background: var(--bg-black-dark);
+}
+```
+
+## Contributing
+
+See [contribution guide](https://github.com/channel-io/bezier-react/wiki/Contribute).
+
+## Maintainers
+
+This package is mainly contributed by Channel Corp. Although feel free to contribution, or raise concerns!

package/dist/cjs/darkTheme.js

@@ -0,0 +1,109 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 22 Nov 2023 01:40:49 GMT
+ */
+
+module.exports = {
+  "bg-white-high": "#464748",
+  "bg-white-normal": "#242428",
+  "bg-white-low": "#313234",
+  "bg-white-dim-dark": "#00000099",
+  "bg-white-dim-light": "#00000033",
+  "bg-gnb": "#464748CC",
+  "bg-navi": "#313234CC",
+  "bg-header": "#313234",
+  "bg-lounge": "#313234E6",
+  "bg-black-darkest": "#FFFFFF99",
+  "bg-black-darker": "#FFFFFF66",
+  "bg-black-dark": "#FFFFFF33",
+  "bg-black-light": "#FFFFFF1F",
+  "bg-black-lighter": "#FFFFFF14",
+  "bg-black-lightest": "#FFFFFF0D",
+  "bg-grey-darkest": "#FFFFFF",
+  "bg-grey-dark": "#A7A7AA",
+  "bg-grey-dim-lightest": "#2A2B2DCC",
+  "bg-grey-light": "#464748",
+  "bg-grey-lighter": "#313234",
+  "bg-grey-lightest": "#2A2B2D",
+  "bgtxt-blue-dark": "#5E56F0",
+  "bgtxt-blue-normal": "#6687FF",
+  "bgtxt-blue-light": "#6687FF66",
+  "bgtxt-blue-lighter": "#6687FF4D",
+  "bgtxt-blue-lightest": "#6687FF33",
+  "bgtxt-cobalt-dark": "#329BE7",
+  "bgtxt-cobalt-normal": "#47C8FF",
+  "bgtxt-cobalt-light": "#47C8FF66",
+  "bgtxt-cobalt-lighter": "#47C8FF4D",
+  "bgtxt-cobalt-lightest": "#47C8FF33",
+  "bgtxt-teal-dark": "#0FB3A3",
+  "bgtxt-teal-normal": "#3CDDCD",
+  "bgtxt-teal-light": "#3CDDCD66",
+  "bgtxt-teal-lighter": "#3CDDCD4D",
+  "bgtxt-teal-lightest": "#3CDDCD33",
+  "bgtxt-green-dark": "#31A552",
+  "bgtxt-green-normal": "#3ACF5A",
+  "bgtxt-green-light": "#3ACF5A66",
+  "bgtxt-green-lighter": "#3ACF5A4D",
+  "bgtxt-green-lightest": "#3ACF5A33",
+  "bgtxt-olive-dark": "#A0A540",
+  "bgtxt-olive-normal": "#CAD548",
+  "bgtxt-olive-light": "#CAD54866",
+  "bgtxt-olive-lighter": "#CAD5484D",
+  "bgtxt-olive-lightest": "#CAD54833",
+  "bgtxt-yellow-dark": "#EDBC40",
+  "bgtxt-yellow-normal": "#FDD353",
+  "bgtxt-yellow-light": "#FDD35366",
+  "bgtxt-yellow-lighter": "#FDD3534D",
+  "bgtxt-yellow-lightest": "#FDD35333",
+  "bgtxt-orange-dark": "#F4800B",
+  "bgtxt-orange-normal": "#FFAB5C",
+  "bgtxt-orange-light": "#FFAB5C66",
+  "bgtxt-orange-lighter": "#FFAB5C4D",
+  "bgtxt-orange-lightest": "#FFAB5C33",
+  "bgtxt-red-dark": "#E94E58",
+  "bgtxt-red-normal": "#FF5C5C",
+  "bgtxt-red-light": "#FF5C5C66",
+  "bgtxt-red-lighter": "#FF5C5C4D",
+  "bgtxt-red-lightest": "#FF5C5C33",
+  "bgtxt-pink-dark": "#CB48AD",
+  "bgtxt-pink-normal": "#EC6FD3",
+  "bgtxt-pink-light": "#EC6FD366",
+  "bgtxt-pink-lighter": "#EC6FD34D",
+  "bgtxt-pink-lightest": "#EC6FD333",
+  "bgtxt-purple-dark": "#915CE0",
+  "bgtxt-purple-normal": "#B570FF",
+  "bgtxt-purple-light": "#B570FF66",
+  "bgtxt-purple-lighter": "#B570FF4D",
+  "bgtxt-purple-lightest": "#B570FF33",
+  "bgtxt-navy-dark": "#3A4F8D",
+  "bgtxt-navy-normal": "#647CC9",
+  "bgtxt-navy-light": "#647CC966",
+  "bgtxt-navy-lighter": "#647CC94D",
+  "bgtxt-navy-lightest": "#647CC933",
+  "bgtxt-absolute-black-dark": "#000000",
+  "bgtxt-absolute-black-normal": "#000000D9",
+  "bgtxt-absolute-black-light": "#00000099",
+  "bgtxt-absolute-black-lighter": "#00000066",
+  "bgtxt-absolute-black-lightest": "#00000033",
+  "bgtxt-absolute-white-dark": "#FFFFFF",
+  "bgtxt-absolute-white-normal": "#FFFFFFE6",
+  "bgtxt-absolute-white-light": "#FFFFFF99",
+  "bgtxt-absolute-white-lighter": "#FFFFFF66",
+  "bgtxt-absolute-white-lightest": "#FFFFFF33",
+  "txt-black-pure": "#FFFFFF",
+  "txt-black-darkest": "#FFFFFFCC",
+  "txt-black-darker": "#FFFFFF99",
+  "txt-black-dark": "#FFFFFF66",
+  "txt-white-normal": "#242428",
+  "bdr-black-dark": "#FFFFFF33",
+  "bdr-black-light": "#FFFFFF1F",
+  "bdr-black-lightest": "#FFFFFF0D",
+  "bdr-grey-light": "#464748",
+  "bdr-white": "#464748",
+  "shdw-xlarge": "#00000099",
+  "shdw-large": "#00000066",
+  "shdw-medium": "#00000033",
+  "shdw-small": "#00000026",
+  "shdw-base": "#00000014",
+  "shdw-inner-base": "#FFFFFF14",
+}

package/dist/cjs/global.js

@@ -0,0 +1,188 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 22 Nov 2023 01:40:49 GMT
+ */
+
+module.exports = {
+  "blue-300": "#6687FF",
+  "blue-400": "#5E56F0",
+  "blue-500": "#4E40C9",
+  "blue-300-40": "#6687FF66",
+  "blue-300-30": "#6687FF4D",
+  "blue-300-20": "#6687FF33",
+  "blue-400-30": "#5E56F04D",
+  "blue-400-20": "#5E56F033",
+  "blue-400-10": "#5E56F01A",
+  "cobalt-300": "#47C8FF",
+  "cobalt-400": "#329BE7",
+  "cobalt-500": "#327AB8",
+  "cobalt-300-40": "#47C8FF66",
+  "cobalt-300-30": "#47C8FF4D",
+  "cobalt-300-20": "#47C8FF33",
+  "cobalt-400-30": "#329BE74D",
+  "cobalt-400-20": "#329BE733",
+  "cobalt-400-10": "#329BE71A",
+  "teal-300": "#3CDDCD",
+  "teal-400": "#0FB3A3",
+  "teal-500": "#449C8A",
+  "teal-300-40": "#3CDDCD66",
+  "teal-300-30": "#3CDDCD4D",
+  "teal-300-20": "#3CDDCD33",
+  "teal-400-30": "#0FB3A34D",
+  "teal-400-20": "#0FB3A333",
+  "teal-400-10": "#0FB3A31A",
+  "green-300": "#3ACF5A",
+  "green-400": "#31A552",
+  "green-500": "#41904F",
+  "green-300-40": "#3ACF5A66",
+  "green-300-30": "#3ACF5A4D",
+  "green-300-20": "#3ACF5A33",
+  "green-400-30": "#31A5524D",
+  "green-400-20": "#31A55233",
+  "green-400-10": "#31A5521A",
+  "olive-300": "#CAD548",
+  "olive-400": "#A0A540",
+  "olive-500": "#818628",
+  "olive-300-40": "#CAD54866",
+  "olive-300-30": "#CAD5484D",
+  "olive-300-20": "#CAD54833",
+  "olive-400-30": "#A0A5404D",
+  "olive-400-20": "#A0A54033",
+  "olive-400-10": "#A0A5401A",
+  "yellow-300": "#FDD353",
+  "yellow-400": "#EDBC40",
+  "yellow-500": "#C39E37",
+  "yellow-300-40": "#FDD35366",
+  "yellow-300-30": "#FDD3534D",
+  "yellow-300-20": "#FDD35333",
+  "yellow-400-30": "#EDBC404D",
+  "yellow-400-20": "#EDBC4033",
+  "yellow-400-10": "#EDBC401A",
+  "orange-300": "#FFAB5C",
+  "orange-400": "#F4800B",
+  "orange-500": "#C57417",
+  "orange-300-40": "#FFAB5C66",
+  "orange-300-30": "#FFAB5C4D",
+  "orange-300-20": "#FFAB5C33",
+  "orange-400-30": "#F4800B4D",
+  "orange-400-20": "#F4800B33",
+  "orange-400-10": "#F4800B1A",
+  "red-300": "#FF5C5C",
+  "red-400": "#E94E58",
+  "red-500": "#AC3E46",
+  "red-300-40": "#FF5C5C66",
+  "red-300-30": "#FF5C5C4D",
+  "red-300-20": "#FF5C5C33",
+  "red-400-30": "#E94E584D",
+  "red-400-20": "#E94E5833",
+  "red-400-10": "#E94E581A",
+  "pink-300": "#EC6FD3",
+  "pink-400": "#CB48AD",
+  "pink-500": "#A32E92",
+  "pink-300-40": "#EC6FD366",
+  "pink-300-30": "#EC6FD34D",
+  "pink-300-20": "#EC6FD333",
+  "pink-400-30": "#CB48AD4D",
+  "pink-400-20": "#CB48AD33",
+  "pink-400-10": "#CB48AD1A",
+  "purple-300": "#B570FF",
+  "purple-400": "#915CE0",
+  "purple-500": "#6B23B3",
+  "purple-300-40": "#B570FF66",
+  "purple-300-30": "#B570FF4D",
+  "purple-300-20": "#B570FF33",
+  "purple-400-30": "#915CE04D",
+  "purple-400-20": "#915CE033",
+  "purple-400-10": "#915CE01A",
+  "navy-300": "#647CC9",
+  "navy-400": "#3A4F8D",
+  "navy-500": "#333D5B",
+  "navy-300-40": "#647CC966",
+  "navy-300-30": "#647CC94D",
+  "navy-300-20": "#647CC933",
+  "navy-400-30": "#3A4F8D4D",
+  "navy-400-20": "#3A4F8D33",
+  "navy-400-10": "#3A4F8D1A",
+  "grey-50": "#FCFCFC",
+  "grey-100": "#F7F7F8",
+  "grey-200": "#EFEFF0",
+  "grey-500": "#A7A7AA",
+  "grey-700": "#464748",
+  "grey-800": "#313234",
+  "grey-850": "#2A2B2D",
+  "grey-900": "#242428",
+  "grey-50-80": "#FCFCFCCC",
+  "grey-100-90": "#F7F7F8E6",
+  "grey-100-80": "#F7F7F8CC",
+  "grey-200-80": "#EFEFF0CC",
+  "grey-700-80": "#464748CC",
+  "grey-800-90": "#313234E6",
+  "grey-800-80": "#313234CC",
+  "grey-850-80": "#2A2B2DCC",
+  "grey-900-90": "#242428E6",
+  "white-5": "#FFFFFF0D",
+  "white-8": "#FFFFFF14",
+  "white-12": "#FFFFFF1F",
+  "white-20": "#FFFFFF33",
+  "white-40": "#FFFFFF66",
+  "white-60": "#FFFFFF99",
+  "white-80": "#FFFFFFCC",
+  "white-90": "#FFFFFFE6",
+  "white-100": "#FFFFFF",
+  "black-3": "#00000008",
+  "black-5": "#0000000D",
+  "black-8": "#00000014",
+  "black-15": "#00000026",
+  "black-20": "#00000033",
+  "black-22": "#00000038",
+  "black-30": "#0000004D",
+  "black-40": "#00000066",
+  "black-60": "#00000099",
+  "black-85": "#000000D9",
+  "black-100": "#000000",
+  "font-size-11": "0.6875rem",
+  "font-size-12": "0.75rem",
+  "font-size-13": "0.8125rem",
+  "font-size-14": "0.875rem",
+  "font-size-15": "0.9375rem",
+  "font-size-16": "1rem",
+  "font-size-17": "1.0625rem",
+  "font-size-18": "1.125rem",
+  "font-size-22": "1.375rem",
+  "font-size-24": "1.5rem",
+  "font-size-30": "1.875rem",
+  "font-size-36": "2.25rem",
+  "font-line-height-16": "1rem",
+  "font-line-height-18": "1.125rem",
+  "font-line-height-20": "1.25rem",
+  "font-line-height-22": "1.375rem",
+  "font-line-height-24": "1.5rem",
+  "font-line-height-28": "1.75rem",
+  "font-line-height-32": "2rem",
+  "font-line-height-36": "2.25rem",
+  "font-line-height-44": "2.75rem",
+  "font-weight-400": "400",
+  "font-weight-700": "700",
+  "font-family-sans-system": "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif",
+  "font-family-sans-kr": "'Inter', 'NotoSansKR', 'NotoSansJP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif",
+  "font-family-sans-jp": "'Inter', 'NotoSansJP', 'NotoSansKR', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif",
+  "font-family-mono": "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
+  "radius-2": "2",
+  "radius-3": "3",
+  "radius-4": "4",
+  "radius-6": "6",
+  "radius-8": "8",
+  "radius-10": "10",
+  "radius-12": "12",
+  "radius-14": "14",
+  "radius-16": "16",
+  "radius-20": "20",
+  "radius-32": "32",
+  "radius-44": "44",
+  "radius-42-p": "42%",
+  "radius-100-p": "100%",
+  "transition-easing": "cubic-bezier(.3,0,0,1)",
+  "transition-duration-s": "150ms",
+  "transition-duration-m": "300ms",
+  "transition-duration-l": "450ms",
+}

package/dist/cjs/index.js

@@ -0,0 +1,5 @@
+exports.tokens = Object.freeze({
+  darkTheme: require('./darkTheme'),
+  global: require('./global'),
+  lightTheme: require('./lightTheme'),
+});

package/dist/cjs/lightTheme.js

@@ -0,0 +1,109 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 22 Nov 2023 01:40:49 GMT
+ */
+
+module.exports = {
+  "bg-white-high": "#FFFFFF",
+  "bg-white-normal": "#FFFFFF",
+  "bg-white-low": "#FFFFFF",
+  "bg-white-dim-dark": "#FFFFFF99",
+  "bg-white-dim-light": "#FFFFFF33",
+  "bg-gnb": "#EFEFF0CC",
+  "bg-navi": "#F7F7F8CC",
+  "bg-header": "#FFFFFF",
+  "bg-lounge": "#F7F7F8E6",
+  "bg-black-darkest": "#00000099",
+  "bg-black-darker": "#00000066",
+  "bg-black-dark": "#00000026",
+  "bg-black-light": "#00000014",
+  "bg-black-lighter": "#0000000D",
+  "bg-black-lightest": "#00000008",
+  "bg-grey-darkest": "#242428",
+  "bg-grey-dark": "#A7A7AA",
+  "bg-grey-dim-lightest": "#FCFCFCCC",
+  "bg-grey-light": "#EFEFF0",
+  "bg-grey-lighter": "#F7F7F8",
+  "bg-grey-lightest": "#FCFCFC",
+  "bgtxt-blue-dark": "#4E40C9",
+  "bgtxt-blue-normal": "#5E56F0",
+  "bgtxt-blue-light": "#5E56F04D",
+  "bgtxt-blue-lighter": "#5E56F033",
+  "bgtxt-blue-lightest": "#5E56F01A",
+  "bgtxt-cobalt-dark": "#327AB8",
+  "bgtxt-cobalt-normal": "#329BE7",
+  "bgtxt-cobalt-light": "#329BE74D",
+  "bgtxt-cobalt-lighter": "#329BE733",
+  "bgtxt-cobalt-lightest": "#329BE71A",
+  "bgtxt-teal-dark": "#449C8A",
+  "bgtxt-teal-normal": "#0FB3A3",
+  "bgtxt-teal-light": "#0FB3A34D",
+  "bgtxt-teal-lighter": "#0FB3A333",
+  "bgtxt-teal-lightest": "#0FB3A31A",
+  "bgtxt-green-dark": "#41904F",
+  "bgtxt-green-normal": "#31A552",
+  "bgtxt-green-light": "#31A5524D",
+  "bgtxt-green-lighter": "#31A55233",
+  "bgtxt-green-lightest": "#31A5521A",
+  "bgtxt-olive-dark": "#818628",
+  "bgtxt-olive-normal": "#A0A540",
+  "bgtxt-olive-light": "#A0A5404D",
+  "bgtxt-olive-lighter": "#A0A54033",
+  "bgtxt-olive-lightest": "#A0A5401A",
+  "bgtxt-yellow-dark": "#C39E37",
+  "bgtxt-yellow-normal": "#EDBC40",
+  "bgtxt-yellow-light": "#EDBC404D",
+  "bgtxt-yellow-lighter": "#EDBC4033",
+  "bgtxt-yellow-lightest": "#EDBC401A",
+  "bgtxt-orange-dark": "#C57417",
+  "bgtxt-orange-normal": "#F4800B",
+  "bgtxt-orange-light": "#F4800B4D",
+  "bgtxt-orange-lighter": "#F4800B33",
+  "bgtxt-orange-lightest": "#F4800B1A",
+  "bgtxt-red-dark": "#AC3E46",
+  "bgtxt-red-normal": "#E94E58",
+  "bgtxt-red-light": "#E94E584D",
+  "bgtxt-red-lighter": "#E94E5833",
+  "bgtxt-red-lightest": "#E94E581A",
+  "bgtxt-pink-dark": "#A32E92",
+  "bgtxt-pink-normal": "#CB48AD",
+  "bgtxt-pink-light": "#CB48AD4D",
+  "bgtxt-pink-lighter": "#CB48AD33",
+  "bgtxt-pink-lightest": "#CB48AD1A",
+  "bgtxt-purple-dark": "#6B23B3",
+  "bgtxt-purple-normal": "#915CE0",
+  "bgtxt-purple-light": "#915CE04D",
+  "bgtxt-purple-lighter": "#915CE033",
+  "bgtxt-purple-lightest": "#915CE01A",
+  "bgtxt-navy-dark": "#333D5B",
+  "bgtxt-navy-normal": "#3A4F8D",
+  "bgtxt-navy-light": "#3A4F8D4D",
+  "bgtxt-navy-lighter": "#3A4F8D33",
+  "bgtxt-navy-lightest": "#3A4F8D1A",
+  "bgtxt-absolute-black-dark": "#000000",
+  "bgtxt-absolute-black-normal": "#000000D9",
+  "bgtxt-absolute-black-light": "#00000099",
+  "bgtxt-absolute-black-lighter": "#00000066",
+  "bgtxt-absolute-black-lightest": "#00000033",
+  "bgtxt-absolute-white-dark": "#FFFFFF",
+  "bgtxt-absolute-white-normal": "#FFFFFFE6",
+  "bgtxt-absolute-white-light": "#FFFFFF99",
+  "bgtxt-absolute-white-lighter": "#FFFFFF66",
+  "bgtxt-absolute-white-lightest": "#FFFFFF33",
+  "txt-black-pure": "#000000",
+  "txt-black-darkest": "#000000D9",
+  "txt-black-darker": "#00000099",
+  "txt-black-dark": "#00000066",
+  "txt-white-normal": "#FFFFFF",
+  "bdr-black-dark": "#00000026",
+  "bdr-black-light": "#00000014",
+  "bdr-black-lightest": "#00000008",
+  "bdr-grey-light": "#EFEFF0",
+  "bdr-white": "#FFFFFF",
+  "shdw-xlarge": "#0000004D",
+  "shdw-large": "#00000038",
+  "shdw-medium": "#00000026",
+  "shdw-small": "#00000014",
+  "shdw-base": "#0000000D",
+  "shdw-inner-base": "#FFFFFF1F",
+}

package/dist/css/dark-theme.css

@@ -0,0 +1,109 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 22 Nov 2023 01:40:49 GMT
+ */
+
+[data-bezier-theme="dark"] {
+  --shdw-inner-base: var(--white-8);
+  --shdw-base: var(--black-8);
+  --shdw-small: var(--black-15);
+  --shdw-medium: var(--black-20);
+  --shdw-large: var(--black-40);
+  --shdw-xlarge: var(--black-60);
+  --bdr-white: var(--grey-700);
+  --bdr-grey-light: var(--grey-700);
+  --bdr-black-lightest: var(--white-5);
+  --bdr-black-light: var(--white-12);
+  --bdr-black-dark: var(--white-20);
+  --txt-white-normal: var(--grey-900);
+  --txt-black-dark: var(--white-40);
+  --txt-black-darker: var(--white-60);
+  --txt-black-darkest: var(--white-80);
+  --txt-black-pure: var(--white-100);
+  --bgtxt-absolute-white-lightest: var(--white-20);
+  --bgtxt-absolute-white-lighter: var(--white-40);
+  --bgtxt-absolute-white-light: var(--white-60);
+  --bgtxt-absolute-white-normal: var(--white-90);
+  --bgtxt-absolute-white-dark: var(--white-100);
+  --bgtxt-absolute-black-lightest: var(--black-20);
+  --bgtxt-absolute-black-lighter: var(--black-40);
+  --bgtxt-absolute-black-light: var(--black-60);
+  --bgtxt-absolute-black-normal: var(--black-85);
+  --bgtxt-absolute-black-dark: var(--black-100);
+  --bgtxt-navy-lightest: var(--navy-300-20);
+  --bgtxt-navy-lighter: var(--navy-300-30);
+  --bgtxt-navy-light: var(--navy-300-40);
+  --bgtxt-navy-normal: var(--navy-300);
+  --bgtxt-navy-dark: var(--navy-400);
+  --bgtxt-purple-lightest: var(--purple-300-20);
+  --bgtxt-purple-lighter: var(--purple-300-30);
+  --bgtxt-purple-light: var(--purple-300-40);
+  --bgtxt-purple-normal: var(--purple-300);
+  --bgtxt-purple-dark: var(--purple-400);
+  --bgtxt-pink-lightest: var(--pink-300-20);
+  --bgtxt-pink-lighter: var(--pink-300-30);
+  --bgtxt-pink-light: var(--pink-300-40);
+  --bgtxt-pink-normal: var(--pink-300);
+  --bgtxt-pink-dark: var(--pink-400);
+  --bgtxt-red-lightest: var(--red-300-20);
+  --bgtxt-red-lighter: var(--red-300-30);
+  --bgtxt-red-light: var(--red-300-40);
+  --bgtxt-red-normal: var(--red-300);
+  --bgtxt-red-dark: var(--red-400);
+  --bgtxt-orange-lightest: var(--orange-300-20);
+  --bgtxt-orange-lighter: var(--orange-300-30);
+  --bgtxt-orange-light: var(--orange-300-40);
+  --bgtxt-orange-normal: var(--orange-300);
+  --bgtxt-orange-dark: var(--orange-400);
+  --bgtxt-yellow-lightest: var(--yellow-300-20);
+  --bgtxt-yellow-lighter: var(--yellow-300-30);
+  --bgtxt-yellow-light: var(--yellow-300-40);
+  --bgtxt-yellow-normal: var(--yellow-300);
+  --bgtxt-yellow-dark: var(--yellow-400);
+  --bgtxt-olive-lightest: var(--olive-300-20);
+  --bgtxt-olive-lighter: var(--olive-300-30);
+  --bgtxt-olive-light: var(--olive-300-40);
+  --bgtxt-olive-normal: var(--olive-300);
+  --bgtxt-olive-dark: var(--olive-400);
+  --bgtxt-green-lightest: var(--green-300-20);
+  --bgtxt-green-lighter: var(--green-300-30);
+  --bgtxt-green-light: var(--green-300-40);
+  --bgtxt-green-normal: var(--green-300);
+  --bgtxt-green-dark: var(--green-400);
+  --bgtxt-teal-lightest: var(--teal-300-20);
+  --bgtxt-teal-lighter: var(--teal-300-30);
+  --bgtxt-teal-light: var(--teal-300-40);
+  --bgtxt-teal-normal: var(--teal-300);
+  --bgtxt-teal-dark: var(--teal-400);
+  --bgtxt-cobalt-lightest: var(--cobalt-300-20);
+  --bgtxt-cobalt-lighter: var(--cobalt-300-30);
+  --bgtxt-cobalt-light: var(--cobalt-300-40);
+  --bgtxt-cobalt-normal: var(--cobalt-300);
+  --bgtxt-cobalt-dark: var(--cobalt-400);
+  --bgtxt-blue-lightest: var(--blue-300-20);
+  --bgtxt-blue-lighter: var(--blue-300-30);
+  --bgtxt-blue-light: var(--blue-300-40);
+  --bgtxt-blue-normal: var(--blue-300);
+  --bgtxt-blue-dark: var(--blue-400);
+  --bg-grey-lightest: var(--grey-850);
+  --bg-grey-lighter: var(--grey-800);
+  --bg-grey-light: var(--grey-700);
+  --bg-grey-dim-lightest: var(--grey-850-80);
+  --bg-grey-dark: var(--grey-500);
+  --bg-grey-darkest: var(--white-100);
+  --bg-black-lightest: var(--white-5);
+  --bg-black-lighter: var(--white-8);
+  --bg-black-light: var(--white-12);
+  --bg-black-dark: var(--white-20);
+  --bg-black-darker: var(--white-40);
+  --bg-black-darkest: var(--white-60);
+  --bg-lounge: var(--grey-800-90);
+  --bg-header: var(--grey-800);
+  --bg-navi: var(--grey-800-80);
+  --bg-gnb: var(--grey-700-80);
+  --bg-white-dim-light: var(--black-20);
+  --bg-white-dim-dark: var(--black-60);
+  --bg-white-low: var(--grey-800);
+  --bg-white-normal: var(--grey-900);
+  --bg-white-high: var(--grey-700);
+}