@o2project/design-system 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [1.2.1](https://github.com/o2project/design-system/compare/v1.2.0...v1.2.1) (2026-01-06)
+
+### 🐛 Bug Fixes
+
+* apply color scheme to main.css ([2174d15](https://github.com/o2project/design-system/commit/2174d157cb5635efdf45f951ba2152a8a9b799bb))
+
+### 📚 Some changes
+
+* remove old color scheme document ([73b6872](https://github.com/o2project/design-system/commit/73b68728b807d42a12f3165316390b3609cd41a8))
+
+## [1.2.0](https://github.com/o2project/design-system/compare/v1.1.0...v1.2.0) (2026-01-06)
+
+### ✨ Features
+
+* introduce color tokens ([9ac632a](https://github.com/o2project/design-system/commit/9ac632a2822009ab8d4f51d415d93839fb75fc6b))
+
+### 📚 Some changes
+
+* update README ([f89fde9](https://github.com/o2project/design-system/commit/f89fde9c720b75eba2234a3531e544f1df945763))
+
 ## [1.1.0](https://github.com/o2project/design-system/compare/v1.0.2...v1.1.0) (2025-11-09)
 
 ### ✨ Features

package/README.md

@@ -1,6 +1,6 @@
 # design-system
 
-Design system for O2 Project
+Design system for O2 Project.
 
 ## 🚀 Getting Started
 
@@ -41,7 +41,7 @@ The static files will be generated in the `storybook-static/` directory.
 
 Components are organized in the `src/components/` directory with their stories collocated in the same directory:
 
-```
+```text
 src/
 └── components/
     ├── Card/
@@ -106,11 +106,11 @@ Storybook automatically generates documentation for your components. Add JSDoc c
 /**
  * Primary UI component for user interaction
  */
-export const Button = ({ 
+export const Button = ({
   /** Button text */
   label,
   /** Visual style variant */
-  variant = 'primary' 
+  variant = 'primary',
 }) => {
   // ...
 };

package/main.css

@@ -1,49 +1,87 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @theme {
-	--color-blue-100: #0086ed;
-	--color-blue-200: #0076d1;
-	--color-blue-300: #0067b5;
-	--color-blue-400: #005799;
-	--color-blue-500: #00477d;
-	--color-blue-600: #003760;
-	--color-blue-700: #002745;
-	--color-blue-800: #001729;
-
-	--color-beige-100: #ebe8ce;
-	--color-beige-200: #d1cfb8;
-	--color-beige-300: #b8b5a2;
-	--color-beige-400: #9e9c8b;
-	--color-beige-500: #858475;
-	--color-beige-600: #69675c;
-	--color-beige-700: #4a4940;
-	--color-beige-800: #2b2b27;
-
-	--color-yellow-100: #f0e800;
-	--color-yellow-200: #d4cd00;
-	--color-yellow-300: #b8b100;
-	--color-yellow-400: #9c9600;
-	--color-yellow-500: #807b00;
-	--color-yellow-600: #636000;
-	--color-yellow-700: #474500;
-	--color-yellow-800: #2b2a00;
-
-	--color-monotone-100: #fafafa;
-	--color-monotone-200: #d6d6d6;
-	--color-monotone-300: #bababa;
-	--color-monotone-400: #9e9e9e;
-	--color-monotone-500: #828282;
-	--color-monotone-600: #636363;
-	--color-monotone-700: #474747;
-	--color-monotone-800: #1a1a1a;
-
-	--color-primary-main: #003760;
-	--color-primary-sub: #858475;
-	--color-primary-accent: #d4cd00;
-
-	--color-neutral-background: #fafafa;
-	--color-neutral-text-main: #1a1a1a;
-	--color-neutral-text-sub: #636363;
-	--color-neutral-link: #0076d1;
-	--color-neutral-border: #9e9e9e;
+  /* Primary colors */
+  --color-primary-tks-yellow: #ffe65e;
+  --color-primary-tks-green: #396039;
+  --color-primary-tks-blue: #005895;
+
+  /* Blue scale */
+  --color-blue-50: #e7f0f8;
+  --color-blue-100: #d2e0ee;
+  --color-blue-200: #a8c1da;
+  --color-blue-300: #7fa2c6;
+  --color-blue-400: #5385b4;
+  --color-blue-500: #005895;
+  --color-blue-600: #004a82;
+  --color-blue-700: #003c6b;
+  --color-blue-800: #002a4e;
+  --color-blue-900: #001c35;
+  --color-blue-950: #000c1b;
+
+  /* Green scale */
+  --color-green-50: #ebf0ea;
+  --color-green-100: #d6e2d6;
+  --color-green-200: #b1c4b0;
+  --color-green-300: #8ca78b;
+  --color-green-400: #698b68;
+  --color-green-500: #396039;
+  --color-green-600: #2d522d;
+  --color-green-700: #234423;
+  --color-green-800: #163017;
+  --color-green-900: #0d200d;
+  --color-green-950: #040e04;
+
+  /* Yellow scale */
+  --color-yellow-50: #fdf6d8;
+  --color-yellow-100: #ffefb2;
+  --color-yellow-200: #ffe671;
+  --color-yellow-300: #edcc48;
+  --color-yellow-400: #caac2f;
+  --color-yellow-500: #a78d1e;
+  --color-yellow-600: #86700a;
+  --color-yellow-700: #665400;
+  --color-yellow-800: #473900;
+  --color-yellow-900: #312802;
+  --color-yellow-950: #201a03;
+
+  /* Red scale */
+  --color-red-50: #fceae8;
+  --color-red-100: #f8d4d1;
+  --color-red-200: #febab4;
+  --color-red-300: #fa8880;
+  --color-red-400: #ff645f;
+  --color-red-500: #fa3d42;
+  --color-red-600: #d01c29;
+  --color-red-700: #a20519;
+  --color-red-800: #72020e;
+  --color-red-900: #4f0a0d;
+  --color-red-950: #340909;
+
+  /* Monotone scale */
+  --color-monotone-brightest: #fcfcfc;
+  --color-monotone-darkest: #1b1b1b;
+  --color-monotone-100: #d7d7d7;
+  --color-monotone-200: #b4b4b4;
+  --color-monotone-300: #929292;
+  --color-monotone-400: #717171;
+  --color-monotone-500: #525252;
+  --color-monotone-600: #353535;
+
+  /* Action colors */
+  --color-action-like: #fa3d42;
+
+  /* Light mode semantic colors */
+  --color-neutral-background: #fcfcfc;
+  --color-neutral-text: #1b1b1b;
+  --color-neutral-text-sub: #717171;
+  --color-neutral-border: #525252;
+
+  @media (prefers-color-scheme: dark) {
+    /* Dark mode semantic colors */
+    --color-neutral-background: #1b1b1b;
+    --color-neutral-text: #fcfcfc;
+    --color-neutral-text-sub: #b4b4b4;
+    --color-neutral-border: #525252;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@o2project/design-system",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "type": "module",
   "description": "Design system for O2 Project",
   "publishConfig": {

package/docs/COLOR_SCHEME.md

@@ -1,121 +0,0 @@
-# O2 Project Design System - Color Scheme
-
-This document defines the color schemes used in the O2 Project design system.
-
-## Base Color Palette
-
-The design system includes four base color palettes, each with 8 shades (100-800):
-
-### Blue
-Primary brand color with 8 shades from light to dark.
-
-- `blue-100`: #0086ed
-- `blue-200`: #0076d1
-- `blue-300`: #0067b5
-- `blue-400`: #005799
-- `blue-500`: #00477d
-- `blue-600`: #003760
-- `blue-700`: #002745
-- `blue-800`: #001729
-
-### Beige
-Neutral warm tone with 8 shades.
-
-- `beige-100`: #ebe8ce
-- `beige-200`: #d1cfb8
-- `beige-300`: #b8b5a2
-- `beige-400`: #9e9c8b
-- `beige-500`: #858475
-- `beige-600`: #69675c
-- `beige-700`: #4a4940
-- `beige-800`: #2b2b27
-
-### Yellow
-Accent color with 8 shades.
-
-- `yellow-100`: #f0e800
-- `yellow-200`: #d4cd00
-- `yellow-300`: #b8b100
-- `yellow-400`: #9c9600
-- `yellow-500`: #807b00
-- `yellow-600`: #636000
-- `yellow-700`: #474500
-- `yellow-800`: #2b2a00
-
-### Monotone
-Grayscale palette with 8 shades.
-
-- `monotone-100`: #fafafa
-- `monotone-200`: #d6d6d6
-- `monotone-300`: #bababa
-- `monotone-400`: #9e9e9e
-- `monotone-500`: #828282
-- `monotone-600`: #636363
-- `monotone-700`: #474747
-- `monotone-800`: #1a1a1a
-
-## Semantic Color Tokens
-
-Semantic tokens provide meaning and intent to colors, making it easier to maintain consistency across the design system.
-
-### Primary Colors
-
-Colors used for primary brand elements and key UI components.
-
-- **main**: `blue-600` (#003760) - Primary brand color for main CTAs and important elements
-- **sub**: `beige-500` (#858475) - Secondary color for supporting elements
-- **accent**: `yellow-200` (#d4cd00) - Accent color for highlights and emphasis
-
-### Neutral Colors
-
-Colors used for backgrounds, text, and borders.
-
-- **background**: `monotone-100` (#fafafa) - Default background color
-- **text-main**: `monotone-800` (#1a1a1a) - Primary text color for headings and body text
-- **text-sub**: `monotone-600` (#636363) - Secondary text color for less prominent text
-- **link**: `blue-200` (#0076d1) - Color for links and interactive text
-- **border**: `monotone-400` (#9e9e9e) - Default border color for components
-
-## Usage in Tailwind CSS
-
-You can use these colors in your components with Tailwind's utility classes:
-
-### Base Colors
-```jsx
-<div className="bg-blue-600 text-white">Primary Button</div>
-<p className="text-monotone-800">Main text content</p>
-```
-
-### Semantic Tokens
-```jsx
-<div className="bg-primary-main text-white">Primary Button</div>
-<p className="text-neutral-text-main">Main text content</p>
-<a className="text-neutral-link">Link text</a>
-<div className="border border-neutral-border">Card component</div>
-```
-
-## TypeScript Usage
-
-When using TypeScript with Tailwind, these colors are available in your components:
-
-```tsx
-interface ButtonProps {
-  variant?: 'primary' | 'secondary';
-}
-
-export const Button: React.FC<ButtonProps> = ({ variant = 'primary' }) => {
-  const baseClasses = variant === 'primary' 
-    ? 'bg-primary-main text-white'
-    : 'bg-neutral-background text-neutral-text-main border border-neutral-border';
-  
-  return <button className={baseClasses}>Click me</button>;
-};
-```
-
-## Best Practices
-
-1. **Use semantic tokens** whenever possible instead of base colors for better maintainability
-2. **Primary colors** should be used for CTAs and important interactive elements
-3. **Neutral colors** should be used for text, backgrounds, and borders
-4. **Maintain contrast ratios** for accessibility (WCAG AA minimum 4.5:1 for normal text)
-5. **Test colors** in both light and dark contexts to ensure readability