feat: add legacy pink

v2/legacy/.gitignore

@@ -0,0 +1,7 @@
+node_modules/
+.DS_Store
+icons-dist/
+*.local
+.turbo
+.vercel
+.idea

v2/legacy/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@appwrite.io/pink-legacy",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "sass --style=compressed --load-path=../../node_modules src/_index.scss:dist/pink.css"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@appwrite.io/pink-icons": "1.0.0",
+    "normalize.css": "^8.0.1",
+    "the-new-css-reset": "^1.11.2"
+  },
+  "main": "dist/pink.css",
+  "style": "dist/pink.css",
+  "jsdelivr": "dist/pink.css",
+  "unpkg": "dist/pink.css"
+}

v2/legacy/src/1-css-variables/_border-radius.scss

@@ -0,0 +1,8 @@
+@use '../abstract' as *;
+:root {
+  --border-radius-xsmall:   #{pxToRem(4)};
+  --border-radius-small:    #{pxToRem(8)};
+  --border-radius-medium:   #{pxToRem(16)};
+  --border-radius-large:    #{pxToRem(24)};
+  --border-radius-circular: 50%;
+}

v2/legacy/src/1-css-variables/_colors.scss

@@ -0,0 +1,125 @@
+@use '../abstract' as *;
+:root {
+  /** Primary **/
+  --color-primary-hue: 343;
+  --color-primary-100: var(--color-primary-hue) 87% 56%;            /* #f02e65 */
+  --color-primary-200: calc(var(--color-primary-hue) - 3) 79% 48%;  /* #DA1A5B */
+  --color-primary-300: calc(var(--color-primary-hue) - 6) 87% 40%;  /* #c00D53 */
+
+  /** Neutral **/
+
+  --color-neutral-0:   0 0% 100%;    /* #ffffff */
+  --color-neutral-5:   240 11% 98%;  /* #FAFAFB */
+  --color-neutral-10:  240 9% 94%;   /* #EDEDF0 */
+  --color-neutral-15:  240 4% 85%;   /* #D8D8DB */
+  --color-neutral-20:  240 3% 77%;   /* #C3C3C6 */
+
+  --color-neutral-50:  240 2% 52%;   /* #818186 */
+  --color-neutral-60:  240 2% 43%;   /* #6C6C71 */
+  --color-neutral-70:  240 3% 35%;   /* #56565C */
+
+  --color-neutral-80:  240 4% 27%;   /* #414146 */
+  --color-neutral-85:  240 4% 18%;   /* #2D2D31 */
+  --color-neutral-90:  240 7% 12%;   /* #1D1D21 */
+  --color-neutral-100: 240 6% 10%;   /* #19191C */
+  --color-neutral-105: 240 5% 8%;    /* #141416 */
+  --color-neutral-1000:0 0% 0%;      /* #000000 */
+
+  /** Information **/
+  --color-information-hue: 189;
+  --color-information-10: calc(var(--color-information-hue) + 4) 88% 94%;   /* #E1F7FD */
+  --color-information-50: calc(var(--color-information-hue) + 13) 90% 89%;  /* #C8F2FC */
+  --color-information-100: var(--color-information-hue) 100% 38%;           /* #00A7C3 */
+  --color-information-120: calc(var(--color-information-hue) + 1) 100% 26%; /* #007187 */
+  --color-information-200: calc(var(--color-information-hue) - 1) 87% 12%;  /* #04333A */
+
+  /** Success **/
+  --color-success-hue: 150;
+  --color-success-10: var(--color-success-hue) 88% 93%;             /* #DFFDEE */
+  --color-success-50: var(--color-success-hue) 91% 87%;             /* #BFFCDD */
+  --color-success-100: var(--color-success-hue) 100% 37%;           /* #00BC5D */
+  --color-success-120: calc(var(--color-success-hue) + 8) 100% 23%; /* #00754A */
+  --color-success-200: calc(var(--color-success-hue) - 1) 79% 11%;  /* #06331C */
+
+  /** Warning **/
+  --color-warning-hue: 33;
+  --color-warning-10: calc(var(--color-warning-hue) + 1) 100% 94%;  /* #FFF1DF */
+  --color-warning-50: calc(var(--color-warning-hue) - 2) 100% 88%;  /* #FFE1C0 */
+  --color-warning-100: var(--color-warning-hue) 100% 48%;           /* #F38500 */
+  --color-warning-120: calc(var(--color-warning-hue) - 9) 100% 35%; /* #B34700 */
+  --color-warning-200: var(--color-warning-hue) 97% 14%;            /* #462701 */
+
+  /** Danger **/
+  --color-danger-hue: 3;
+  --color-danger-10: calc(var(--color-danger-hue) - 3) 100% 96%;  /* #FFEBEB */
+  --color-danger-50: calc(var(--color-danger-hue) - 2) 100% 92%;  /* #FFD5D4 */
+  --color-danger-100: var(--color-danger-hue) 100% 61%;           /* #FF453A */
+  --color-danger-120: calc(var(--color-danger-hue) - 3) 82% 39%;  /* #B31212 */
+  --color-danger-200: calc(var(--color-danger-hue) - 1) 91% 13%;  /* #3E0503 */
+
+  /** Blue **/
+  --color-blue-hue: 218;
+  --color-blue-100: var(--color-blue-hue) 100% 82%;               /* #A1C4FF */
+
+  /** Green **/
+  --color-green-hue: 172;
+  --color-green-100: var(--color-green-hue) 50% 72%;              /* #94DBD1 */
+
+  /** Orange **/
+  --color-orange-hue: 32;
+  --color-orange-100: var(--color-orange-hue) 97% 75%;            /* #FDC584 */
+
+  /** Red **/
+  --color-red-hue: 0;
+  --color-red-100: var(--color-red-hue) 100% 82%;                 /* #FFA1A1 */
+
+  /** Purple **/
+  --color-purple-hue: 261;
+  --color-purple-100: var(--color-purple-hue) 93% 84%;            /* #CBB1FC */
+
+  /** Pink **/
+  --color-pink-hue: 331;
+  --color-pink-100: var(--color-pink-hue) 100% 82%;               /* #FFA1CE */
+
+  /* [Newly added] mint */
+  --color-mint-hue: 177;
+  --color-mint-500: calc(var(--color-mint-hue) + 1) 54%  69%;
+  /* [Finish added] */
+
+
+  /* transparent */
+  --transparent: 0 0% 0% / 0;
+}
+
+
+:root {
+  --color-pink-text: var(--color-primary-100);
+
+  --color-text-disabled: var(--color-neutral-20);
+  --color-text-offline: var(--color-neutral-50);
+  --color-text-info: var(--color-information-100);
+  --color-text-danger: var(--color-danger-100);
+  --color-text-warning: var(--color-warning-100);
+  --color-text-success: var(--color-success-100);
+
+  --color-text-gray: var(--color-neutral-50);
+
+  --color-border: var(--color-neutral-10);
+  --scroll-color: var(--color-neutral-20);
+
+  #{$theme-dark} {
+    --color-pink-text: var(--color-primary-200);
+
+    --color-text-disabled: var(--color-neutral-60);
+    --color-text-offline: var(--color-neutral-50);
+    --color-text-info: var(--color-information-100);
+    --color-text-danger: var(--color-danger-100);
+    --color-text-warning: var(--color-warning-100);
+    --color-text-success: var(--color-success-100);
+
+    --color-text-gray: var(--color-neutral-20);
+
+    --color-border: var(--color-neutral-85);
+    --scroll-color: var(--color-neutral-80);
+  }
+}

v2/legacy/src/1-css-variables/_common.scss

@@ -0,0 +1,5 @@
+@use '../abstract' as *;
+/* common CSS native variables */
+:root {
+  --transition: 0.2s;
+}

v2/legacy/src/1-css-variables/_fonts.scss

@@ -0,0 +1,17 @@
+@use '../abstract' as *;
+:root {
+  --heading-font: 'Poppins', arial, sans-serif;
+  --content-font: 'Inter', arial, sans-serif;
+  --code-font: 'Source Code Pro', monospace;
+
+  --font-size-00: #{pxToRem(12)};
+  --font-size-0:  #{pxToRem(14)};
+  --font-size-1:  #{pxToRem(16)};
+  --font-size-2:  #{pxToRem(18)};
+  --font-size-3:  #{pxToRem(20)};
+  --font-size-4:  #{pxToRem(24)};
+  --font-size-5:  #{pxToRem(28)};
+  --font-size-6:  #{pxToRem(32)};
+  --font-size-7:  #{pxToRem(36)};
+  --font-size-8:  #{pxToRem(40)};
+}

v2/legacy/src/1-css-variables/_index.scss

@@ -0,0 +1,7 @@
+@forward "language";
+@forward "common";
+@forward "fonts";
+@forward "colors";
+@forward "sizes";
+@forward "border-radius";
+@forward "shadows";

v2/legacy/src/1-css-variables/_language.scss

@@ -0,0 +1,11 @@
+:root {
+  --transform-direction: 1;
+  --start-direction: left;
+  --end-direction: right;
+
+  &[dir="rtl"] {
+    --transform-direction: -1;
+    --start-direction: right;
+    --end-direction: left;
+  }
+}

v2/legacy/src/1-css-variables/_shadows.scss

@@ -0,0 +1,19 @@
+@use '../abstract' as *;
+
+:root {
+  --shadow-color: var(--color-neutral-80);
+
+  --shadow-small:   #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.02)};
+  --shadow-large:   #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.04)};
+
+  /* focus state shadow */
+  $focus: 0 0 0 pxToRem(1) hsl(var(--color-information-100)), 0 0 0 pxToRem(4) hsl(var(--color-information-100) / 0.25);
+  --focus-box-shadow: #{$focus};
+
+  #{$theme-dark} {
+    --shadow-color: var(--color-neutral-105);
+
+    --shadow-small:   #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.5)};
+    --shadow-large:   #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 1)};
+  }
+}

v2/legacy/src/1-css-variables/_sizes.scss

@@ -0,0 +1,16 @@
+@use '../abstract' as *;
+:root {
+  --container-size-small:   #{pxToRem(320)};
+  --container-size-medium:  #{pxToRem(496)};
+  --container-size-large:   #{pxToRem(700)};
+  --container-size-xl:      #{pxToRem(928)};
+  --container-size-xxl:     #{pxToRem(1260)};
+  --container-size-xxxl:    #{pxToRem(1394)};
+
+  /* icons */
+  --icon-size-small:        #{pxToRem(16)};
+  --icon-size-medium:       #{pxToRem(20)}; /* default */
+  --icon-size-large:        #{pxToRem(24)};
+  --icon-size-extra-large:  #{pxToRem(32)};
+
+}

v2/legacy/src/2-resets/_custom-css-reset.scss

@@ -0,0 +1,28 @@
+@use '../abstract' as *;
+/** custom reset **/
+
+img[src=""] {
+  visibility: hidden;
+}
+
+button {
+  cursor: pointer;
+}
+
+pre {
+  margin-block: 0;
+}
+
+details summary::-webkit-details-marker {
+  display:none;
+}
+
+summary::-webkit-details-marker { display:none!important; }
+
+input::-webkit-datetime-edit { line-height:1; padding:0; margin-bottom:-2px; }
+
+
+#{$theme-dark} {
+  input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(0.8); }
+  input[type="time"]::-webkit-calendar-picker-indicator { filter:invert(0.8); }
+}

v2/legacy/src/2-resets/_index.scss

@@ -0,0 +1,10 @@
+@use 'sass:meta';
+@layer the-new-css-reset, typography;
+
+@layer the-new-css-reset {
+  @include meta.load-css('the-new-css-reset/css/reset.css');
+}
+
+@layer typography {
+  @include meta.load-css('typography');
+}