Skip to content

Commit

Permalink
Merge pull request #25 from deriv-com/michio/add-motions-tokens-updat…
Browse files Browse the repository at this point in the history 
…e-colors
  • Loading branch information
@mohsen-deriv
mohsen-deriv authored Nov 9, 2023
2 parents f27c611 + 93468dd commit 44d4aa0
Show file tree
Hide file tree
Showing 9 changed files with 5,218 additions and 0 deletions.
22 changes: 22 additions & 0 deletions dist/quill-tailwind/_core.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
--core-color-gradient-slate-420: linear-gradient(88.07deg, rgba(24, 28, 37, 0) 1.63%, #181c25 50.02%);
--core-color-gradient-slate-430: linear-gradient(181.93deg, rgba(24, 28, 37, 0) 1.63%, #181c25 50.01%);
--core-color-gradient-slate-440: linear-gradient(271.93deg, rgba(24, 28, 37, 0) 1.63%, #181c25 49.98%);
--core-color-opacity-white-75: rgba(255, 255, 255, 0.04);
--core-color-opacity-white-100: rgba(255, 255, 255, 0.08);
--core-color-opacity-white-200: rgba(255, 255, 255, 0.16);
--core-color-opacity-white-300: rgba(255, 255, 255, 0.24);
Expand All @@ -107,6 +108,7 @@
--core-color-opacity-white-600: rgba(255, 255, 255, 0.72); /* 72% of base color */
--core-color-opacity-white-700: rgba(255, 255, 255, 0.8); /* 80% of base color */
--core-color-opacity-white-800: rgba(255, 255, 255, 0.88); /* 88% of base color */
--core-color-opacity-black-75: rgba(0, 0, 0, 0.04); /* Initially 4%. changed to 8%. */
--core-color-opacity-black-100: rgba(0, 0, 0, 0.08); /* Initially 4%. changed to 8%. */
--core-color-opacity-black-200: rgba(0, 0, 0, 0.16); /* Initially 8%. changed to 16%. */
--core-color-opacity-black-300: rgba(0, 0, 0, 0.24); /* 24% of base color */
Expand Down Expand Up @@ -492,6 +494,26 @@
--core-color-solid-slate-1200: #181c25;
--core-color-solid-slate-1300: #11141b;
--core-color-solid-slate-1400: #000000;
--core-motion-ease-100: cubic-bezier(0, 0, 1, 1);
--core-motion-ease-200: cubic-bezier(1, 0, 1, 1);
--core-motion-ease-300: cubic-bezier(0, 0, 0, 1);
--core-motion-ease-400: cubic-bezier(0.72, 0, 0.24, 1);
--core-motion-duration-50: 0ms;
--core-motion-duration-100: 80ms;
--core-motion-duration-200: 160ms;
--core-motion-duration-300: 240ms;
--core-motion-duration-400: 480ms;
--core-motion-duration-500: 720ms;
--core-motion-duration-600: 960ms;
--core-motion-duration-700: 1200ms;
--core-motion-duration-800: 1440ms;
--core-motion-duration-900: 1680ms;
--core-motion-duration-1000: 1920ms;
--core-motion-duration-1100: 2400ms;
--core-motion-duration-1200: 2880ms;
--core-motion-duration-1300: 3360ms;
--core-motion-duration-1400: 3840ms;
--core-motion-duration-1500: 4320ms;
--core-opacity-50: 0;
--core-opacity-75: 0.04;
--core-opacity-100: 0.08;
Expand Down
2 changes: 2 additions & 0 deletions dist/quill-tailwind/tailwind.config.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,7 @@ const QuillTailwindConfig = {
},
opacity: {
white: {
"75": "rgba(255, 255, 255, 0.04)",
"100": "rgba(255, 255, 255, 0.08)",
"200": "rgba(255, 255, 255, 0.16)",
"300": "rgba(255, 255, 255, 0.24)",
Expand All @@ -284,6 +285,7 @@ const QuillTailwindConfig = {
"800": "rgba(255, 255, 255, 0.88)",
},
black: {
"75": "rgba(0, 0, 0, 0.04)",
"100": "rgba(0, 0, 0, 0.08)",
"200": "rgba(0, 0, 0, 0.16)",
"300": "rgba(0, 0, 0, 0.24)",
Expand Down
2 changes: 2 additions & 0 deletions dist/quill-tailwind/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,7 @@ const QuillTailwindConfig = {
},
opacity: {
white: {
"75": "rgba(255, 255, 255, 0.04)",
"100": "rgba(255, 255, 255, 0.08)",
"200": "rgba(255, 255, 255, 0.16)",
"300": "rgba(255, 255, 255, 0.24)",
Expand All @@ -284,6 +285,7 @@ const QuillTailwindConfig = {
"800": "rgba(255, 255, 255, 0.88)",
},
black: {
"75": "rgba(0, 0, 0, 0.04)",
"100": "rgba(0, 0, 0, 0.08)",
"200": "rgba(0, 0, 0, 0.16)",
"300": "rgba(0, 0, 0, 0.24)",
Expand Down
2 changes: 2 additions & 0 deletions dist/quill-tailwind/token-names.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,7 @@ export const allNames = {
"gradient-slate-420",
"gradient-slate-430",
"gradient-slate-440",
"opacity-white-75",
"opacity-white-100",
"opacity-white-200",
"opacity-white-300",
Expand All @@ -285,6 +286,7 @@ export const allNames = {
"opacity-white-600",
"opacity-white-700",
"opacity-white-800",
"opacity-black-75",
"opacity-black-100",
"opacity-black-200",
"opacity-black-300",
Expand Down
1 change: 1 addition & 0 deletions raw-tokens/data/$metadata.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"core/opacity",
"core/spacing",
"core/typography",
"core/motion",
"semantic/global",
"semantic/viewPort/default",
"semantic/viewPort/640-plus",
Expand Down
9 changes: 9 additions & 0 deletions raw-tokens/data/core/color/opacity.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
"color": {
"opacity": {
"white": {
"75": {
"value": "rgba({core.color.solid.slate.50},{core.opacity.75})",
"type": "color"
},
"100": {
"value": "rgba({core.color.solid.slate.50},{core.opacity.100})",
"type": "color"
Expand Down Expand Up @@ -42,6 +46,11 @@
}
},
"black": {
"75": {
"value": "rgba({core.color.solid.slate.1400},{core.opacity.75})",
"type": "color",
"description": "Initially 4%. changed to 8%."
},
"100": {
"value": "rgba({core.color.solid.slate.1400},{core.opacity.100})",
"type": "color",
Expand Down
90 changes: 90 additions & 0 deletions raw-tokens/data/core/motion.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
{
"core": {
"motion": {
"ease": {
"100": {
"value": "cubic-bezier(0, 0, 1, 1)",
"type": "other"
},
"200": {
"value": "cubic-bezier(1, 0, 1, 1)",
"type": "other"
},
"300": {
"value": "cubic-bezier(0, 0, 0, 1)",
"type": "other"
},
"400": {
"value": "cubic-bezier(0.72, 0, 0.24, 1)",
"type": "other"
}
},
"duration": {
"50": {
"value": "0ms",
"type": "other"
},
"100": {
"value": "80ms",
"type": "other"
},
"200": {
"value": "160ms",
"type": "other"
},
"300": {
"value": "240ms",
"type": "other"
},
"400": {
"value": "480ms",
"type": "other"
},
"500": {
"value": "720ms",
"type": "other"
},
"600": {
"value": "960ms",
"type": "other"
},
"700": {
"value": "1200ms",
"type": "other"
},
"800": {
"value": "1440ms",
"type": "other"
},
"900": {
"value": "1680ms",
"type": "other"
},
"1000": {
"value": "1920ms",
"type": "other"
},
"1100": {
"value": "2400ms",
"type": "other"
},
"1200": {
"value": "2880ms",
"type": "other"
},
"1300": {
"value": "3360ms",
"type": "other"
},
"1400": {
"value": "3840ms",
"type": "other"
},
"1500": {
"value": "4320ms",
"type": "other"
}
}
}
}
}
42 changes: 42 additions & 0 deletions raw-tokens/data/semantic/global.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,5 +30,47 @@
"value": "{core.opacity.400}",
"type": "opacity"
}
},
"motion": {
"easing": {
"linear": {
"value": "{core.motion.ease.100}",
"type": "Motion"
},
"in": {
"value": "{core.motion.ease.200}",
"type": "Motion"
},
"out": {
"value": "{core.motion.ease.300}",
"type": "Motion"
},
"inandout": {
"value": "{core.motion.ease.400}",
"type": "Motion"
}
},
"duration": {
"instant": {
"value": "{core.motion.duration.50}",
"type": "Motion"
},
"snappy": {
"value": "{core.motion.duration.300}",
"type": "Motion"
},
"moderate": {
"value": "{core.motion.duration.400}",
"type": "Motion"
},
"relax": {
"value": "{core.motion.duration.500}",
"type": "Motion"
},
"deliberate": {
"value": "{core.motion.duration.600}",
"type": "Motion"
}
}
}
}
Loading

0 comments on commit 44d4aa0

Please sign in to comment.